Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/lyanchouss/one-avatarimport { Avatar } from "@/components/ui/one-avatar";
const members = [
{
name: "shadcn/ui",
fallback: "SU",
src: "https://github.com/shadcn.png",
label: "Image crossfades in",
},
{
name: "Edwin Vakayil",
fallback: "EV",
label: "Fallback-only state",
},
{
name: "Automation",
fallback: "AI",
label: "Immediate initials",
},
];
export function TeamAvatars() {
return (
<div className="flex items-center gap-8">
{members.map((member) => (
<div key={member.name} className="flex flex-col items-center gap-2">
<Avatar
alt={member.name}
fallback={member.fallback}
name={member.name}
src={member.src}
/>
<div className="text-center">
<div className="text-sm font-medium">{member.name}</div>
<div className="text-xs text-muted-foreground">{member.label}</div>
</div>
</div>
))}
</div>
);
}
export default TeamAvatars