Empty State

1"use client";
2import * as React from "react"
3import { FolderOpen } from "lucide-react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { cn } from "@/lib/utils"
6
7const emptyVariants = cva(
8    "flex flex-col items-center justify-center text-center rounded-lg transition-colors",
9    {
10        variants: {
11            variant: {
12                default: "border border-border bg-muted/5",
13                secondary: "border border-border/50 bg-secondary/50",
14                glass: "bg-foreground/5 backdrop-blur-md border border-border/50 shadow-sm",
15                outline: "border border-border bg-background shadow-xs",
16                ghost: "bg-transparent border-none shadow-none"
17            },
18            size: {
19                sm: "p-6 min-h-[150px]",
20                md: "p-12 min-h-[300px]",
21                lg: "p-16 min-h-[450px]",
22                fill: "p-8 w-full h-full min-h-inherit"
23            }
24        },
25        defaultVariants: {
26            variant: "default",
27            size: "md",
28        },
29    }
30)
31
32export interface EmptyProps
33    extends React.HTMLAttributes<HTMLDivElement>,
34    VariantProps<typeof emptyVariants> {
35    title?: string;
36    description?: string;
37    titleClassName?: string;
38    descriptionClassName?: string;
39    icon?: React.ReactNode;
40    action?: React.ReactNode;
41}
42
43const Empty = React.forwardRef<HTMLDivElement, EmptyProps>(
44    ({ className, variant, size, title, description, titleClassName, descriptionClassName, icon, action, children, ...props }, ref) => {
45
46        const activeIcon = icon || <FolderOpen className="size-6 text-muted-foreground" />
47
48        return (
49            <div
50                ref={ref}
51                className={cn(emptyVariants({ variant, size, className }))}
52                {...props}
53            >
54                {/* Icon Container */}
55                <div className={cn(
56                    "flex items-center justify-center rounded-full mb-4",
57                    "bg-muted/50 border border-border/50 p-3", // Standard Shadcn-like icon wrapper
58                    variant === "glass" && "bg-foreground/10 border-white/10 text-foreground"
59                )}>
60                    {activeIcon}
61                </div>
62
63                {/* Content */}
64                <div className="space-y-2 max-w-sm">
65                    {title && (
66// … truncated