Shimmer

1// components/core/shimmer-skeleton.tsx
2'use client';
3 
4import * as React from 'react';
5import { motion } from 'motion/react';
6import { cn } from '@/lib/utils';
7 
8export type ShimmerVariant = 'line' | 'avatar' | 'card' | 'rect' | 'list';
9 
10export type ShimmerProps = {
11  /** Which visual variant to render. */
12  variant?: ShimmerVariant;
13 
14  /** Number of repeated items (useful for lists). */
15  count?: number;
16 
17  /** Width as Tailwind friendly string or number (px). Applied to top-level when relevant. */
18  width?: string | number;
19 
20  /** Height as Tailwind friendly string or number (px). Applied to top-level when relevant. */
21  height?: string | number;
22 
23  /** Rounded corners style. */
24  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
25 
26  /** Tailwind color for base (e.g. 'bg-zinc-200 dark:bg-zinc-700') - accepts classes. */
27  baseClassName?: string;
28 
29  /** Tailwind color for shimmer highlight (applied via gradient stop). */
30  highlightClassName?: string;
31 
32  /** Animation speed multiplier (1 = default). */
33  speed?: number;
34 
35  /** Gap between items when count > 1 (px). */
36  gap?: number;
37 
38  /** Custom className on each item. */
39  className?: string;
40 
41  /** When true, makes element accessible for screen readers with label. */
42  ariaLabel?: string | null;
43 
44  /** If true, use reduced-motion friendly static style. */
45  reduceMotion?: boolean;
46};
47 
48const ROUND_MAP: Record<string, string> = {
49  none: 'rounded-none',
50  sm: 'rounded-sm',
51  md: 'rounded-md',
52  lg: 'rounded-lg',
53  full: 'rounded-full',
54};
55 
56function pxOrString(v?: string | number) {
57  if (v === undefined) return undefined;
58  return typeof v === 'number' ? `${v}px` : v;
59}
60 
61/**
62 * Shimmer/Skeleton component
63 *
64 * - Presentational, repeatable, accessible
65 * - Use variant + count to produce multi-line lists/cards etc
66 */
67export default function Shimmer({
68  variant = 'line',
69  count = 1,
70  width,
71  height,
72  rounded = 'md',
73  baseClassName = 'bg-zinc-200 dark:bg-zinc-700',
74  //   highlightClassName = 'bg-white/70',
75  speed = 1,
76  gap = 12,
77  className,
78  ariaLabel = null,
79  reduceMotion = false,
80}: ShimmerProps) {
81  // animation duration in seconds
82  const duration = Math.max(0.6, 1.6 / Math.max(0.25, speed));
83 
84  const itemStyle: React.CSSProperties = {
85    width: pxOrString(width),
86    height: pxOrString(height),
87    marginBottom: count > 1 ? `${gap}px` : undefined,
88  };
89 
90  // helper render single item depending on variant
91  const renderItem = (i: number) => {
92// … truncated