import React from "react"; function Section({ title, children }: { title: string; children: React.ReactNode }) { return (

{title}

{children}
); } function Avatar({ initials, image, size = "md", showStatus = false, }: { initials: string; image?: string; size?: "sm" | "md" | "lg"; showStatus?: boolean; }) { const dims = { sm: "w-8 h-8", md: "w-10 h-10", lg: "w-14 h-14" }; const textSize = { sm: "text-xs", md: "text-sm", lg: "text-lg" }; return (
{image ? ( {initials} ) : (
{initials}
)} {showStatus && ( )}
); } export default function AvatarDemo() { return (
{["AB", "CD", "EF", "GH"].map((initials, i) => (
0 ? "-ml-2" : ""}>
{initials}
))}
); }