Avatars

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 AvatarsSection() {
29  const users = [
30    { initials: 'AM', bg: 'bg-brand-500', ring: 'ring-brand-500' },
31    { initials: 'SC', bg: 'bg-success-500', ring: 'ring-success-500' },
32    { initials: 'MJ', bg: 'bg-warning-500', ring: 'ring-warning-500' },
33    { initials: 'ED', bg: 'bg-error-500', ring: 'ring-error-500' },
34    { initials: 'DW', bg: 'bg-blue-light-500', ring: 'ring-blue-light-500' },
35  ];
36
37  return (
38    <SectionCard title="Avatars" sourceSlug="/ui/source/ui-elements/avatars">
39      <div className="space-y-5">
40        {/* Single Avatars */}
41        <div>
42          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Individual</p>
43          <div className="flex items-center gap-3">
44            {users.map((u) => (
45              <div key={u.initials} className={`flex size-11 items-center justify-center rounded-full ${u.bg} text-sm font-bold text-white ring-2 ring-offset-2 ring-offset-white ${u.ring} dark:ring-offset-gray-dark`}>
46                {u.initials}
47              </div>
48            ))}
49          </div>
50        </div>
51
52        {/* Avatar Group */}
53        <div>
54          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Group</p>
55          <div className="flex items-center -space-x-3">
56            {users.map((u) => (
57              <div key={u.initials} className={`flex size-10 items-center justify-center rounded-full ${u.bg} text-xs font-bold text-white ring-2 ring-white dark:ring-gray-dark`}>
58                {u.initials}
59              </div>
60            ))}
61            <div className="flex size-10 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold text-gray-600 ring-2 ring-white dark:bg-gray-700 dark:text-gray-300 dark:ring-gray-dark">
62              +3
63            </div>
64          </div>
65        </div>
66
67        {/* With Status */}
68        <div>
69          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">With Status</p>
70          <div className="flex items-center gap-4">
71            <div className="relative">
72              <div className="flex size-11 items-center justify-center rounded-full bg-brand-500 text-sm font-bold text-white">AM</div>
73              <span className="absolute bottom-0 right-0 size-3 rounded-full border-2 border-white bg-success-500 dark:border-gray-dark" />
74            </div>
75            <div className="relative">
76              <div className="flex size-11 items-center justify-center rounded-full bg-warning-500 text-sm font-bold text-white">SC</div>
77              <span className="absolute bottom-0 right-0 size-3 rounded-full border-2 border-white bg-warning-500 dark:border-gray-dark" />
78            </div>
79            <div className="relative">
80              <div className="flex size-11 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white">MJ</div>
81              <span className="absolute bottom-0 right-0 size-3 rounded-full border-2 border-white bg-gray-400 dark:border-gray-dark" />
82            </div>
83          </div>
84        </div>
85      </div>
86    </SectionCard>
87  );
88}