"use client"; import { useSyncExternalStore } from "react"; import type { HTMLAttributes } from "react"; const motionQuery = "(prefers-reduced-motion: reduce)"; function subscribeMotion(callback: () => void) { const media = window.matchMedia(motionQuery); media.addEventListener?.("change", callback); return () => media.removeEventListener?.("change", callback); } function usePrefersReducedMotion(force?: boolean) { const preferred = useSyncExternalStore(subscribeMotion, () => window.matchMedia(motionQuery).matches, () => false); return force ?? preferred; } export type SkeletonProps = HTMLAttributes & { animate?: boolean }; export function Skeleton({ animate = true, className = "", ...props }: SkeletonProps) { return (

); } const lineWidths = ["w-full", "w-11/12", "w-4/5", "w-2/3", "w-3/4"]; export function SkeletonText({ lines = 3, animate = true, className = "" }: { lines?: number; animate?: boolean; className?: string }) { return (

{Array.from({ length: lines }, (_, index) => ( ))}

); } export type SkeletonSetProps = Omit, "children"> & { variant?: "card" | "list" | "table" | "article"; rows?: number; label?: string; reducedMotion?: boolean; }; export function SkeletonSet({ variant = "card", rows = 3, label = "Loading", reducedMotion, className = "", ...props }: SkeletonSetProps) { const reduce = usePrefersReducedMotion(reducedMotion); const animate = !reduce; const rowList = Array.from({ length: rows }, (_, index) => index); return (

{label} {variant === "card" ? (

) : null} {variant === "list" ? (

) : null} {variant === "table" ? (

{rowList.map((index) => (

))}

) : null} {variant === "article" ? (

) : null}

); }