added user overview

app/client/pages/profile/$username.tsx

@@ -1,5 +1,8 @@
-import {Stack} from '@chakra-ui/react';
-import {createFileRoute} from '@tanstack/react-router';
+import { Avatar } from '@app/client/components/ui/avatar';
+import { toFormattedDate } from '@app/client/helpers';
+import { useUserOneQuery } from '@app/client/hooks/useUserOneQuery';
+import { Card, Heading, HStack, SkeletonCircle, SkeletonText, Stack, Text } from '@chakra-ui/react';
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/profile/$username')({
   component: RouteComponent
@@ -7,5 +10,67 @@ export const Route = createFileRoute('/profile/$username')({
 
 function RouteComponent() {
   const { username } = Route.useParams();
-  return <Stack>{`Hello, "${username}"!`}</Stack>;
+
+  const { data } = useUserOneQuery({
+    input: {
+      username
+    }
+  });
+
+  if (data == null) return <UserOverviewSkeleton />;
+
+  return (
+    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
+      <UserOverview user={{ ...data.userOne }} />
+    </Stack>
+  );
+}
+
+function UserOverview({
+  user
+}: {
+  readonly user: {
+    readonly id: string;
+    readonly username: string;
+    readonly description?: string | null;
+    readonly createdAt: string;
+  };
+}) {
+  return (
+    <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px" gap={3}>
+      <Stack direction="row" alignItems="start">
+        <Avatar size="2xl" fallback={user.username[0]} />
+        <Stack width="100%">
+          <Heading color="colorPalette.400" size="2xl" overflow="auto">
+            {user.username}
+          </Heading>
+
+          <Stack direction="row">
+            <Text fontWeight="bold">joined:</Text>
+            <Text color="fg.muted">{toFormattedDate({ value: user.createdAt })}</Text>
+          </Stack>
+        </Stack>
+      </Stack>
+      <Card.Root variant="subtle" width="100%">
+        <Card.Body paddingX="3" paddingY="1">
+          <Text>{user.description ?? 'No user description =('}</Text>
+        </Card.Body>
+      </Card.Root>
+    </Stack>
+  );
+}
+
+function UserOverviewSkeleton() {
+  return (
+    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
+      <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px">
+        <SkeletonCircle width={70} height={70} />
+        <Stack gap="6" maxWidth="100%">
+          <HStack width="full">
+            <SkeletonText noOfLines={5} />
+          </HStack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
 }