Alerts

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { CheckCircle, AlertTriangle, XCircle, X, 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 AlertsSection() {
29  const [dismissed, setDismissed] = useState<Record<string, boolean>>({});
30  const dismiss = (id: string) => setDismissed((p) => ({ ...p, [id]: true }));
31
32  const alerts = [
33    { id: 'info', bg: 'bg-blue-light-50 dark:bg-blue-light-500/10', icon: Info, iconColor: 'text-blue-light-500', title: 'Info Alert', desc: 'This is an informational message for your attention.' },
34    { id: 'success', bg: 'bg-success-50 dark:bg-success-500/10', icon: CheckCircle, iconColor: 'text-success-500', title: 'Success Alert', desc: 'Your changes have been saved successfully.' },
35    { id: 'warning', bg: 'bg-warning-50 dark:bg-warning-500/10', icon: AlertTriangle, iconColor: 'text-warning-500', title: 'Warning Alert', desc: 'Please review before proceeding further.' },
36    { id: 'error', bg: 'bg-error-50 dark:bg-error-500/10', icon: XCircle, iconColor: 'text-error-500', title: 'Error Alert', desc: 'Something went wrong. Please try again later.' },
37  ];
38
39  return (
40    <SectionCard title="Alerts" sourceSlug="/ui/source/ui-elements/alerts">
41      <div className="space-y-3">
42        {alerts.map((a) => !dismissed[a.id] && (
43          <div key={a.id} className={`flex items-start gap-3 rounded-xl p-4 ${a.bg}`}>
44            <a.icon className={`mt-0.5 size-5 shrink-0 ${a.iconColor}`} />
45            <div className="flex-1 min-w-0">
46              <p className="text-sm font-semibold text-gray-800 dark:text-white/90">{a.title}</p>
47              <p className="mt-0.5 text-sm text-gray-600 dark:text-gray-400">{a.desc}</p>
48            </div>
49            <button onClick={() => dismiss(a.id)} className="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
50              <X className="size-4" />
51            </button>
52          </div>
53        ))}
54        {Object.keys(dismissed).length === 4 && (
55          <button onClick={() => setDismissed({})} className="text-sm font-medium text-brand-500 hover:text-brand-600">
56            Reset Alerts
57          </button>
58        )}
59      </div>
60    </SectionCard>
61  );
62}