Empty State

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
7  action?: { label: string; onClick?: () => void };
8  description?: string;
9  icon?: React.ReactNode;
10  title: string;
11}
12 
13export function EmptyState({
14  icon,
15  title,
16  description,
17  action,
18  className,
19  ...props
20}: EmptyStateProps) {
21  return (
22    <div
23      data-slot="tron-empty-state"
24      className={cn(
25        "relative flex flex-col items-center justify-center rounded border border-primary/20 border-dashed bg-card/40 px-8 py-12 text-center backdrop-blur-sm",
26        className
27      )}
28      {...props}
29    >
30      {icon ? (
31        <span className="mb-4 flex h-12 w-12 items-center justify-center text-foreground/15">
32          {icon}
33        </span>
34      ) : (
35        <svg
36          aria-hidden="true"
37          width="48"
38          height="48"
39          viewBox="0 0 48 48"
40          fill="none"
41          className="mb-4 text-foreground/15"
42        >
43          <rect
44            x="8"
45            y="8"
46            width="32"
47            height="32"
48            rx="4"
49            stroke="currentColor"
50            strokeWidth="1.5"
51            strokeDasharray="4 4"
52          />
53          <path
54            d="M20 24h8M24 20v8"
55            stroke="currentColor"
56            strokeWidth="1.5"
57            strokeLinecap="round"
58          />
59        </svg>
60      )}
61 
62      <h3 className="font-mono text-foreground/40 text-xs uppercase tracking-widest">
63        {title}
64      </h3>
65 
66      {description ? (
67        <p className="mt-1.5 max-w-xs font-mono text-[10px] text-foreground/25 leading-relaxed">
68          {description}
69        </p>
70      ) : null}
71 
72      {action ? (
73        <button
74          type="button"
75          onClick={action.onClick}
76          className="mt-4 rounded border border-primary/30 bg-primary/10 px-4 py-1.5 font-mono text-[10px] text-primary uppercase tracking-widest transition-all hover:bg-primary/20 hover:shadow-[0_0_8px_rgba(var(--primary-rgb,0,180,255),0.15)]"
77        >
78          {action.label}
79        </button>
80      ) : null}
81 
82      {/* Corner decorations */}
83      <div className="pointer-events-none absolute top-1 left-1 h-2.5 w-2.5 border-primary/20 border-t border-l" />
84      <div className="pointer-events-none absolute top-1 right-1 h-2.5 w-2.5 border-primary/20 border-t border-r" />
85// … truncated