Glass Skeleton

1"use client"
2 
3import * as React from "react"
4import { motion } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface GlassSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
8  variant?: "default" | "circular" | "text" | "card"
9  width?: string | number
10  height?: string | number
11  lines?: number
12}
13 
14const GlassSkeleton = React.forwardRef<HTMLDivElement, GlassSkeletonProps>(
15  ({ className, variant = "default", width, height, lines = 1, ...props }, ref) => {
16    const baseClasses = cn(
17      "relative overflow-hidden",
18      "bg-white/5 backdrop-blur-sm",
19      "before:absolute before:inset-0",
20      "before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
21      "before:animate-[shimmer_2s_infinite]",
22    )
23 
24    const variantClasses = {
25      default: "rounded-xl",
26      circular: "rounded-full",
27      text: "rounded-md h-4",
28      card: "rounded-2xl min-h-[120px]",
29    }
30 
31    if (variant === "text" && lines > 1) {
32      return (
33        <div className="space-y-2" ref={ref} {...props}>
34          {Array.from({ length: lines }).map((_, index) => (
35            <motion.div
36              key={index}
37              className={cn(baseClasses, variantClasses.text, index === lines - 1 && "w-3/4", className)}
38              style={{
39                width: index === lines - 1 ? "75%" : width,
40                height,
41                backgroundSize: "400% 100%",
42              }}
43              animate={{
44                backgroundPosition: ["200% 0", "-200% 0"],
45              }}
46              transition={{
47                duration: 2,
48                repeat: Number.POSITIVE_INFINITY,
49                ease: "linear",
50                delay: index * 0.1,
51              }}
52              aria-hidden="true"
53            />
54          ))}
55        </div>
56      )
57    }
58 
59    return (
60      <motion.div
61        ref={ref}
62        className={cn(baseClasses, variantClasses[variant], className)}
63        // Ensure onDrag prop is not forwarded to motion.div
64        {...(() => {
65          const { onDrag, ...rest } = props as any // eslint-disable-line @typescript-eslint/no-explicit-any
66          return rest
67        })()}
68        style={{
69          width,
70          height,
71          backgroundSize: "400% 100%",
72        }}
73        animate={{
74          backgroundPosition: ["200% 0", "-200% 0"],
75        }}
76        transition={{
77          duration: 2,
78          repeat: Number.POSITIVE_INFINITY,
79          ease: "linear",
80        }}
81// … truncated