asepharyana
1b56212d1a
Ground-up rombak UI: hapus semua component/page lama, bangun ulang dengan desain sistem Ambient (WebGL haze + drifting motes, signal-driven color) di atas kontrak API/WS/type yang sudah ada. - Design system: globals.css tokens + primitives (glass, button, badge, select, avatar, toast, chart SVG murni). - Shell: nav rail, topbar (status WS + pill signal + theme), AppFrame. - 8 halaman: dashboard, voice (orbital stage), media, messages (live feed + detail AI), moderation, analysis (search), recordings, + chatbot floating. - Command palette (Cmd/Ctrl+K) untuk navigasi cepat. - Server fetch di-page di-try/catch agar render graceful saat backend mati. Verified: tsc clean, next build 8/8 halaman, semua route 200.
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
function initials(name?: string | null): string {
|
|
if (!name) return "?";
|
|
const parts = name.replace(/[^\p{L}\p{N} _]/gu, "").trim().split(/\s+/);
|
|
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
|
|
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
|
}
|
|
|
|
export function Avatar({
|
|
src,
|
|
name,
|
|
size = 36,
|
|
className,
|
|
ring,
|
|
}: {
|
|
src?: string | null;
|
|
name?: string | null;
|
|
size?: number;
|
|
className?: string;
|
|
ring?: boolean;
|
|
}) {
|
|
const dim = { width: size, height: size };
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
|
|
"bg-gradient-to-br from-white/10 to-white/[0.02] text-ink-soft",
|
|
ring && "ring-2 ring-signal/50",
|
|
className,
|
|
)}
|
|
style={dim}
|
|
>
|
|
{src ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={src}
|
|
alt={name ?? "avatar"}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
<span
|
|
className="font-semibold"
|
|
style={{ fontSize: Math.max(10, size * 0.36) }}
|
|
>
|
|
{initials(name)}
|
|
</span>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|