Skeleton

import { Skeleton } from "@/ui/Skeleton";

<div className="space-y-3">
  <Skeleton.Root variant="line" width="70%" />
  <Skeleton.Root variant="line" width="45%" />
  <Skeleton.Root variant="rect" className="h-24" />
</div>

type SkeletonProps = {
  variant?: "line" | "rect" | "circle";
  width?: number | string;
  height?: number | string;
  className?: string;
};

function SkeletonRoot({ variant = "line", width, height, className }: SkeletonProps) {
  const base = "inline-block animate-pulse bg-slate-200 dark:bg-[#1f2937]";
  const shape =
    variant === "line"
      ? "h-4 w-40 rounded-md"
      : variant === "circle"
        ? "h-10 w-10 rounded-full"
        : "h-24 w-full rounded-xl";
  return (
    <span
      aria-hidden="true"
      className={base + " " + shape + " " + (className ?? "")}
      style={{ width, height }}
    />
  );
}

type SkeletonCompound = typeof SkeletonRoot & { Root: typeof SkeletonRoot };
export const Skeleton = Object.assign(SkeletonRoot, { Root: SkeletonRoot }) as SkeletonCompound;