Status Indicator

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { 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 StatusIndicatorSection() {
29  const statuses = [
30    { label: 'Online', color: 'bg-success-500', ring: 'ring-success-500/30', text: 'text-success-500' },
31    { label: 'Away', color: 'bg-warning-500', ring: 'ring-warning-500/30', text: 'text-warning-500' },
32    { label: 'Busy', color: 'bg-error-500', ring: 'ring-error-500/30', text: 'text-error-500' },
33    { label: 'Offline', color: 'bg-gray-400', ring: 'ring-gray-400/30', text: 'text-gray-400' },
34  ];
35
36  const users = [
37    { name: 'Alex Morgan', status: 'Online', initials: 'AM' },
38    { name: 'Sarah Chen', status: 'Away', initials: 'SC' },
39    { name: 'Mike Ross', status: 'Busy', initials: 'MR' },
40    { name: 'Jane Doe', status: 'Offline', initials: 'JD' },
41  ];
42
43  const getColor = (status: string) => statuses.find((s) => s.label === status)!;
44
45  return (
46    <SectionCard title="Status Indicator" sourceSlug="/ui/source/ui-elements/status-indicator">
47      <div className="space-y-5">
48        {/* Status Dots */}
49        <div className="flex flex-wrap gap-4">
50          {statuses.map((s) => (
51            <div key={s.label} className="flex items-center gap-2">
52              <span className={`relative flex size-3 ${s.color} rounded-full`}>
53                {(s.label === 'Online' || s.label === 'Busy') && <span className={`absolute inset-0 animate-ping rounded-full ${s.color} opacity-75`} />}
54              </span>
55              <span className={`text-sm font-medium ${s.text}`}>{s.label}</span>
56            </div>
57          ))}
58        </div>
59        {/* With Avatars */}
60        <div>
61          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">With Avatars</p>
62          <div className="flex flex-wrap gap-4">
63            {users.map((u) => {
64              const c = getColor(u.status);
65              return (
66                <div key={u.name} className="flex items-center gap-2.5">
67                  <div className="relative">
68                    <div className="flex size-10 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-xs font-bold text-gray-600 dark:text-gray-300">{u.initials}</div>
69                    <span className={`absolute -bottom-0.5 -right-0.5 size-3 rounded-full border-2 border-white dark:border-gray-dark ${c.color}`} />
70                  </div>
71                  <div>
72                    <p className="text-sm font-medium text-gray-800 dark:text-white/90">{u.name}</p>
73                    <p className={`text-xs ${c.text}`}>{u.status}</p>
74                  </div>
75                </div>
76              );
77            })}
78          </div>
79        </div>
80      </div>
81    </SectionCard>
82  );
83}