import { ImageIcon } from "@phosphor-icons/react/dist/ssr";
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5 rounded-xl bg-surface p-6 shadow-clay">
      <div className="flex items-center gap-4">
        <Skeleton className="size-12 rounded-full" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
      <Skeleton className="grid h-32 w-full place-items-center rounded-xl">
        <ImageIcon weight="duotone" className="size-10 text-on-surface-muted/50" />
      </Skeleton>
      <div className="flex gap-3">
        <Skeleton className="h-9 flex-1 rounded-full" />
        <Skeleton className="size-9 rounded-full" />
      </div>
    </div>
  );
}
Installation
