Notification Badge

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Mail, Settings, Bell, ShoppingCart, 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 NotificationBadgeSection() {
29  const [count, setCount] = useState(5);
30
31  return (
32    <SectionCard title="Notification Badge" sourceSlug="/ui/source/ui-elements/notification-badge">
33      <div className="space-y-5">
34        <div className="flex flex-wrap gap-6">
35          {/* Bell with count */}
36          <button onClick={() => setCount((p) => Math.max(0, p - 1))} className="relative">
37            <Bell className="size-7 text-gray-600 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 transition-colors" />
38            {count > 0 && <span className="absolute -right-1.5 -top-1.5 flex size-5 items-center justify-center rounded-full bg-error-500 text-[10px] font-bold text-white">{count}</span>}
39          </button>
40          {/* Mail with dot */}
41          <div className="relative">
42            <Mail className="size-7 text-gray-600 dark:text-gray-400" />
43            <span className="absolute -right-1 -top-1 size-3 rounded-full bg-brand-500" />
44          </div>
45          {/* Shopping cart */}
46          <button className="relative">
47            <ShoppingCart className="size-7 text-gray-600 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 transition-colors" />
48            <span className="absolute -right-2 -top-2 flex size-5 items-center justify-center rounded-full bg-brand-500 text-[10px] font-bold text-white">3</span>
49          </button>
50          {/* Settings with dot */}
51          <div className="relative">
52            <Settings className="size-7 text-gray-600 dark:text-gray-400" />
53            <span className="absolute -right-0.5 -top-0.5 size-2.5 rounded-full bg-warning-500 ring-2 ring-white dark:ring-gray-dark" />
54          </div>
55        </div>
56        {/* Badge Variants */}
57        <div>
58          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Badge Variants</p>
59          <div className="flex flex-wrap gap-4">
60            {[
61              { label: 'New', color: 'bg-error-500' },
62              { label: '99+', color: 'bg-brand-500' },
63              { label: 'Beta', color: 'bg-warning-500' },
64            ].map((b) => (
65              <div key={b.label} className="flex items-center gap-2">
66                <span className="text-sm text-gray-700 dark:text-gray-300">Label</span>
67                <span className={`rounded-full ${b.color} px-2 py-0.5 text-[10px] font-bold text-white`}>{b.label}</span>
68              </div>
69            ))}
70          </div>
71        </div>
72        <button onClick={() => setCount(5)} className="text-xs font-medium text-brand-500 hover:text-brand-600 transition-colors">Reset count</button>
73      </div>
74    </SectionCard>
75  );
76}