"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

const avatarSizes = {
  sm: "h-10 w-10",
  md: "h-12 w-12",
  lg: "h-14 w-14",
};

export interface SkeletonCardProps extends React.HTMLAttributes<HTMLDivElement> {
  rows?: number;
  showAvatar?: boolean;
  avatarSize?: keyof typeof avatarSizes;
  shimmerDuration?: number;
}

function SkeletonCard({
  rows = 3,
  showAvatar = true,
  avatarSize = "md",
  shimmerDuration = 1.6,
  className,
  ...props
}: SkeletonCardProps) {
  const rowCount = Math.max(1, rows);
  const rowWidths = ["90%", "100%", "80%", "95%", "70%"];

  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-xl border border-border bg-card p-6",
        className
      )}
      {...props}
    >
      <motion.div
        className="pointer-events-none absolute inset-0 z-10 text-muted-foreground opacity-30"
        style={{
          backgroundImage:
            "linear-gradient(110deg, transparent 0%, currentColor 45%, transparent 80%)",
        }}
        animate={{ x: ["-100%", "100%"] }}
        transition={{ duration: shimmerDuration, repeat: Infinity, ease: "linear" }}
      />

      <div className="relative z-0 flex flex-col gap-5">
        <div className="flex items-center gap-4">
          {showAvatar ? (
            <div
              className={cn(
                "rounded-full bg-muted",
                avatarSizes[avatarSize]
              )}
            />
          ) : null}
          <div className="flex-1 space-y-2">
            <div className="h-4 w-3/5 rounded-full bg-muted" />
            <div className="h-3 w-2/5 rounded-full bg-muted" />
          </div>
        </div>

        <div className="space-y-3">
          {Array.from({ length: rowCount }).map((_, index) => (
            <div
              key={`row-${index}`}
              className="h-3 rounded-full bg-muted"
              style={{ width: rowWidths[index % rowWidths.length] }}
            />
          ))}
        </div>

        <div className="flex items-center gap-3">
          <div className="h-9 w-24 rounded-full bg-muted" />
          <div className="h-9 w-20 rounded-full bg-muted" />
        </div>
      </div>
    </div>
  );
}

export { SkeletonCard };
Skeleton Card

Dependencies

Files

Installation
