30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import { Mail } from 'lucide-react';
|
|
import { Skeleton } from '../ui/skeleton';
|
|
|
|
export function ProfileSkeleton() {
|
|
return (
|
|
<div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
|
|
<div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
|
|
<div className="flex flex-col w-full gap-3">
|
|
<div className="flex flex-col w-full gap-3">
|
|
<div className="flex flex-row gap-3 w-full lg:flex-col">
|
|
<Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
|
|
<div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
|
|
<Skeleton className="w-32 h-8" />
|
|
<Skeleton className="w-20 h-6" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
|
|
<Mail className="h-4 w-4 stroke-muted-foreground" />
|
|
<Skeleton className="w-32 h-4" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="w-64 h-[40px]" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
|
|
</Skeleton>
|
|
</div>
|
|
);
|
|
}
|