Empty States

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Plus, Search, Package, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function EmptyStatesSection() {
29  return (
30    <SectionCard title="Empty States" sourceSlug="/ui/source/ui-elements/empty-states">
31      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
32        {/* No Data */}
33        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 dark:border-white/10 py-12 px-4 text-center">
34          <div className="flex size-16 items-center justify-center rounded-full bg-gray-100 dark:bg-white/5">
35            <Package className="size-8 text-gray-400" />
36          </div>
37          <h4 className="mt-4 text-base font-semibold text-gray-800 dark:text-white/90">No Data Found</h4>
38          <p className="mt-1 max-w-xs text-sm text-gray-500 dark:text-gray-400">There are no items to display. Start by adding your first item.</p>
39          <button className="mt-4 inline-flex items-center gap-2 rounded-xl bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600 transition-colors"><Plus className="size-4" /> Add Item</button>
40        </div>
41
42        {/* No Results */}
43        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 dark:border-white/10 py-12 px-4 text-center">
44          <div className="flex size-16 items-center justify-center rounded-full bg-gray-100 dark:bg-white/5">
45            <Search className="size-8 text-gray-400" />
46          </div>
47          <h4 className="mt-4 text-base font-semibold text-gray-800 dark:text-white/90">No Results</h4>
48          <p className="mt-1 max-w-xs text-sm text-gray-500 dark:text-gray-400">Your search did not match any results. Try adjusting your search terms.</p>
49          <button className="mt-4 rounded-xl border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:border-white/10 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">Clear Filters</button>
50        </div>
51      </div>
52    </SectionCard>
53  );
54}