completionId: cgen-d112d2df411a48a2bf461f5a375524e9

cgen-d112d2df411a48a2bf461f5a375524e9
This commit is contained in:
Builder.io 2025-11-14 23:20:46 +00:00
parent 5c1444af18
commit cca1c73812

View file

@ -118,41 +118,43 @@ export function FeedItemCard({
armColor.bg,
"bg-background/70"
)}>
<CardHeader className="pb-0 px-3 py-3 sm:p-5 lg:p-6 !flex !flex-row items-start justify-between gap-2 sm:gap-3 space-y-0">
<div className="flex flex-1 items-start gap-2 sm:gap-3 min-w-0">
<Avatar className="h-12 w-12 ring-2 ring-aethex-500/30 flex-shrink-0">
<AvatarImage
src={item.authorAvatar || undefined}
alt={item.authorName}
/>
<AvatarFallback className="bg-aethex-500/10 text-aethex-300 text-sm">
{item.authorName?.[0]?.toUpperCase() || "U"}
</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1 space-y-1">
<div className="flex items-center gap-2 flex-wrap">
<CardTitle className="text-base sm:text-lg lg:text-lg font-semibold text-foreground">
{item.authorName}
</CardTitle>
<Badge className={cn("text-xs font-bold uppercase px-2 py-0.5", armColor.badge)}>
{armLabel}
</Badge>
<CardHeader className="pb-0 p-4 sm:p-5 lg:p-6">
<div className="flex items-start justify-between gap-4">
<div className="flex flex-1 items-start gap-3">
<Avatar className="h-12 w-12 ring-2 ring-aethex-500/30">
<AvatarImage
src={item.authorAvatar || undefined}
alt={item.authorName}
/>
<AvatarFallback className="bg-aethex-500/10 text-aethex-300">
{item.authorName?.[0]?.toUpperCase() || "U"}
</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1 space-y-1">
<div className="flex items-center gap-2 flex-wrap">
<CardTitle className="text-lg font-semibold text-foreground">
{item.authorName}
</CardTitle>
<Badge className={cn("text-xs font-bold uppercase", armColor.badge)}>
{armLabel}
</Badge>
</div>
</div>
</div>
<Button
size="sm"
variant={isFollowing ? "outline" : "default"}
onClick={() => onToggleFollow(item.authorId)}
className={cn(
"rounded-full border-border/60",
isFollowing
? "bg-background/80 text-foreground"
: "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",
)}
>
{isFollowing ? "Following" : "Follow"}
</Button>
</div>
<Button
size="sm"
variant={isFollowing ? "outline" : "default"}
onClick={() => onToggleFollow(item.authorId)}
className={cn(
"rounded-full border-border/60 flex-shrink-0 text-xs h-8 sm:h-9 px-2.5 sm:px-4 whitespace-nowrap",
isFollowing
? "bg-background/80 text-foreground border-border/60"
: "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",
)}
>
{isFollowing ? "Following" : "Follow"}
</Button>
</CardHeader>
<CardContent className="space-y-4 sm:space-y-5 lg:space-y-6 p-4 sm:p-5 lg:p-6">
{hasMedia && (