"use client"; import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" function Empty({ className, ...props }: React.ComponentProps<"div">) { return (

) } function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } const emptyMediaVariants = cva( "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", { variants: { variant: { default: "bg-transparent", icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4", }, }, defaultVariants: { variant: "default", }, } ) function EmptyMedia({ className, variant = "default", ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) { return (

a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className )} {...props} /> ) } function EmptyContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } import { useRef } from "react"; import type { ReactNode } from "react"; import { motion, useInView, type Variants } from "motion/react"; import { Button } from "@/components/ui/button"; import { FolderOpen, Plus } from "lucide-react"; interface EmptyStateAction { label: string; icon?: ReactNode; onClick?: () => void; } interface EmptyStateProps { icon?: ReactNode; title?: string; description?: string; primaryAction?: EmptyStateAction; } const EASE = [0.16, 1, 0.3, 1] as const; const containerVariants: Variants = { hidden: {}, show: { transition: { staggerChildren: 0.1, delayChildren: 0.05, }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE }, }, }; const EmptyState = ({ icon = , title = "No Projects yet", description = "Get started by creating your first project", primaryAction = { label: "Create project", icon: , }, }: EmptyStateProps) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, amount: 0.2 }); return (

{icon} {title} {description} {primaryAction && ( )}

); }; export default EmptyState;