import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const cardVariants = cva("w-full relative", { variants: { variant: { default: [ "border rounded-lg", "border-zinc-200 dark:border-zinc-800", "bg-white dark:bg-zinc-950", ], dots: [ "relative mx-auto w-full", "rounded-lg border border-dashed", "border-zinc-300 dark:border-zinc-800", "px-4 sm:px-6 md:px-8", ], gradient: ["relative mx-auto w-full", "px-4 sm:px-6 md:px-8"], plus: [ "border border-dashed", "border-zinc-400 dark:border-zinc-700", "relative", ], neubrutalism: [ "border-[0.5px]", "border-zinc-400 dark:border-white/70", "relative", "shadow-[4px_4px_0px_0px_rgba(0,0,0)]", "dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.7)]", ], inner: [ "border-[0.5px] rounded-sm p-2", "border-zinc-300 dark:border-zinc-800", ], lifted: [ "border rounded-xl", "border-zinc-400 dark:border-zinc-700", "relative", "shadow-[0px_5px_0px_0px_rgba(0,0,0,0.7)]", "dark:shadow-[0px_4px_0px_0px_rgba(255,255,255,0.5)]", "bg-zinc-50 dark:bg-zinc-900/50", ], corners: [ "border-2 rounded-md", "border-zinc-100 dark:border-zinc-700", "relative", ], }, }, defaultVariants: { variant: "default", }, }) export interface CardProps extends React.HTMLAttributes, VariantProps { title?: string description?: string } const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

{props.children}

)) CardContent.displayName = "CardContent" const Card = React.forwardRef( ({ className, variant, title, description, children, ...props }, ref) => { const DotsPattern = () => { const sharedClasses = "rounded-full outline outline-8 dark:outline-gray-950 sm:my-6 md:my-8 size-1 my-4 outline-gray-50 bg-green-400" return ( <>

{title && (

{title}

)} {description && (

{description}

)} {children}

) } const GradientLines = () => ( <>

{content}

) const PlusIcons = () => ( <> ) const CornerBorders = () => ( <>

) const InnerContent = () => { if (variant === "dots") return if (variant === "gradient") return if (variant === "plus") return if (variant === "corners") return return null } const content = ( {title && (

{title}

)} {description && (

{description}

)} {children} ) if (variant === "dots") { return (

{content}

) } if (variant === "inner") { return (

{content}

) } if (variant === "gradient") { return (

) } return (

{content}

) }, ) Card.displayName = "Card" export { Card, CardContent, cardVariants }