import { Card } from "@/components/ui/heroui-card";
const communities = [
{
title: "Indie Hackers",
members: "148 members",
byline: "By Martha",
image: "https://cdn.21st.dev/assets/mirror/b1/b18655204b951fe5837e478777ab2631cb0004530fd3b670160c3a96d0a839eb.jpg",
imageAlt: "Indie Hackers community",
avatar: "https://cdn.21st.dev/assets/mirror/81/81b92cb17f6c3c142a5cdb568904f7bb147d17fe3454737b9187aafca340412c.jpg",
avatarAlt: "Martha's avatar",
},
{
title: "AI Builders",
members: "362 members",
byline: "By John",
image: "https://cdn.21st.dev/assets/mirror/78/78c4eec27e3cdc658fe5595a273a4003f3eef78a480cc2a46a4f36dcf54033aa.jpg",
imageAlt: "AI Builders community",
avatar: "https://cdn.21st.dev/assets/mirror/de/defa32ddb23b6307c5cb8d701022186645dfcee057d2b0ba9ec1955dea22db70.jpg",
avatarAlt: "John's avatar - blue themed",
},
];
export default function CardWithAvatarDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-wrap justify-center gap-4">
{communities.map((community) => (
<Card className="w-[200px] gap-2" key={community.title}>
<img
alt={community.imageAlt}
className="pointer-events-none aspect-square w-14 rounded-2xl object-cover select-none"
src={community.image}
/>
<Card.Header>
<Card.Title>{community.title}</Card.Title>
<Card.Description>{community.members}</Card.Description>
</Card.Header>
<Card.Footer className="flex gap-2">
<span className="size-5 overflow-hidden rounded-full">
<img alt={community.avatarAlt} className="size-full object-cover" src={community.avatar} />
</span>
<span className="text-xs">{community.byline}</span>
</Card.Footer>
</Card>
))}
</div>
</div>
);
}
export { CardWithAvatarDemo };
