Shimmer Skeleton

import {
  ShimmerSkeleton,
  ShimmerSkeletonBox,
} from "@/components/ui/shimmer-skeleton";

export default function ShimmerSkeletonDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm">
        {/* Cover image placeholder */}
        <ShimmerSkeletonBox className="h-40 w-full rounded-none" />

        <div className="space-y-4 p-4">
          {/* Author row */}
          <ShimmerSkeleton avatar lines={2} />

          {/* Body copy */}
          <div className="space-y-2">
            <ShimmerSkeletonBox className="h-3 w-full" />
            <ShimmerSkeletonBox className="h-3 w-full" />
            <ShimmerSkeletonBox className="h-3 w-4/5" />
          </div>

          {/* Footer actions */}
          <div className="flex items-center gap-3 pt-1">
            <ShimmerSkeletonBox className="h-8 w-24 rounded-md" />
            <ShimmerSkeletonBox className="h-8 w-8 rounded-md" />
          </div>
        </div>
      </div>
    </div>
  );
}