Base Widget

1"use client"
2 
3import * as React from "react"
4import { motion, type HTMLMotionProps, type Variants } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface GlassWidgetBaseProps extends Omit<HTMLMotionProps<"div">, "children"> {
8  children: React.ReactNode
9  size?: "sm" | "md" | "lg" | "xl"
10  glowEffect?: boolean
11  glowColor?: "cyan" | "purple" | "blue" | "pink" | "green" | "amber" | "red"
12  hoverScale?: boolean
13  interactive?: boolean
14}
15 
16const sizeClasses = {
17  sm: "p-3",
18  md: "p-4",
19  lg: "p-5",
20  xl: "p-6",
21}
22 
23const glowColors = {
24  cyan: "from-cyan-500/30 via-blue-500/30 to-purple-500/30",
25  purple: "from-purple-500/30 via-pink-500/30 to-purple-500/30",
26  blue: "from-blue-500/30 via-indigo-500/30 to-blue-500/30",
27  pink: "from-pink-500/30 via-rose-500/30 to-pink-500/30",
28  green: "from-emerald-500/30 via-teal-500/30 to-emerald-500/30",
29  amber: "from-amber-500/30 via-orange-500/30 to-amber-500/30",
30  red: "from-red-500/30 via-rose-500/30 to-red-500/30",
31}
32 
33const widgetVariants = {
34  hidden: { opacity: 0, y: 20, scale: 0.95 },
35  visible: {
36    opacity: 1,
37    y: 0,
38    scale: 1,
39    transition: {
40      type: "spring",
41      visualDuration: 0.4,
42      bounce: 0.2,
43    },
44  },
45  hover: {
46    y: -2,
47    transition: {
48      type: "spring",
49      visualDuration: 0.3,
50      bounce: 0.4,
51    },
52  },
53} as const
54 
55const glowVariants: Variants = {
56  initial: { opacity: 0.4, scale: 0.98 },
57  animate: {
58    opacity: [0.4, 0.6, 0.4] as number[],
59    scale: [0.98, 1, 0.98] as number[],
60    transition: {
61      duration: 4,
62      repeat: Number.POSITIVE_INFINITY,
63      ease: "easeInOut",
64    },
65  },
66  hover: {
67    opacity: 0.8,
68    scale: 1.02,
69    transition: {
70      type: "spring",
71      visualDuration: 0.3,
72      bounce: 0.3,
73    },
74  },
75}
76 
77const GlassWidgetBase = React.forwardRef<HTMLDivElement, GlassWidgetBaseProps>(
78  (
79    {
80      className,
81      children,
82      size = "md",
83      glowEffect = true,
84      glowColor = "cyan",
85      hoverScale = true,
86      interactive = true,
87      ...props
88    },
89    ref,
90  ) => {
91    return (
92      <motion.div
93        className="relative h-full"
94        initial="hidden"
95        animate="visible"
96        whileHover={interactive && hoverScale ? "hover" : undefined}
97        variants={widgetVariants}
98      >
99        {/* Glow effect */}
100        {glowEffect && (
101          <motion.div
102            className={cn("absolute -inset-0.5 rounded-2xl bg-linear-to-r blur-xl", glowColors[glowColor])}
103// … truncated