Glass Card

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface GlassCardProps extends React.HTMLAttributes<HTMLDivElement> {
7  glowEffect?: boolean
8  children: React.ReactNode
9}
10 
11const GlassCard = React.forwardRef<HTMLDivElement, GlassCardProps>(
12  ({ className, glowEffect = true, children, ...props }, ref) => {
13    return (
14      <div className="relative">
15        {glowEffect && (
16          <div className="absolute -inset-1 rounded-2xl bg-linear-to-r from-cyan-500/30 via-blue-500/30 to-purple-500/30 blur-xl opacity-70" />
17        )}
18        <div
19          ref={ref}
20          className={cn(
21            "relative rounded-2xl border border-white/20",
22            "bg-white/10 backdrop-blur-xl",
23            "shadow-[0_8px_32px_rgba(0,0,0,0.37)]",
24            "before:absolute before:inset-0 before:rounded-2xl",
25            "before:bg-linear-to-b before:from-white/20 before:to-transparent before:pointer-events-none",
26            "after:absolute after:inset-px after:rounded-[calc(1rem-1px)]",
27            "after:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)] after:pointer-events-none",
28            className,
29          )}
30          {...props}
31        >
32          <div className="relative z-10">{children}</div>
33        </div>
34      </div>
35    )
36  },
37)
38GlassCard.displayName = "GlassCard"
39 
40const GlassCardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
41  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />,
42)
43GlassCardHeader.displayName = "GlassCardHeader"
44 
45const GlassCardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
46  ({ className, ...props }, ref) => (
47    <h3
48      ref={ref}
49      className={cn("text-xl font-semibold text-white leading-none tracking-tight", className)}
50      {...props}
51    />
52  ),
53)
54GlassCardTitle.displayName = "GlassCardTitle"
55 
56const GlassCardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
57  ({ className, ...props }, ref) => <p ref={ref} className={cn("text-sm text-white/60", className)} {...props} />,
58)
59GlassCardDescription.displayName = "GlassCardDescription"
60 
61const GlassCardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
62  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
63)
64GlassCardContent.displayName = "GlassCardContent"
65 
66// … truncated