src/components/auth/AdminShow.tsx

@@ -1,8 +1,7 @@
-import { useSession } from '@/lib/auth-client';
+import { useAuth } from './auth-provider';
 
 const AdminShow = ({ children }: { children: React.ReactNode }) => {
-  const { data } = useSession();
-  const isAdmin = data?.user?.role ? data?.user?.role === 'admin' : false;
+  const { isAdmin } = useAuth();
 
   return isAdmin && children;
 };

src/components/auth/AuthShow.tsx

@@ -1,8 +1,7 @@
-import { useSession } from '@/lib/auth-client';
+import { useAuth } from './auth-provider';
 
 const AuthShow = ({ children }: { children: React.ReactNode }) => {
-  const { data } = useSession();
-  const isAuth = !!data;
+  const { isAuth } = useAuth();
 
   return isAuth && children;
 };

src/routes/(app)/(auth)/account/settings.tsx

@@ -7,5 +7,11 @@ export const Route = createFileRoute('/(app)/(auth)/account/settings')({
 });
 
 function RouteComponent() {
-  return <div>Hello "account/settings"!</div>;
+  return (
+    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+        abc
+      </div>
+    </div>
+  );
 }