76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
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
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const { username } = Route.useParams();
|
|
|
|
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>
|
|
);
|
|
}
|