completionId: cgen-740b117bf4674c608b50438de08eed6f
cgen-740b117bf4674c608b50438de08eed6f
This commit is contained in:
Builder.io
parent
6c1849b109
commit
adf586e88f
1 changed files with 30 additions and 29 deletions
|
|
@ -118,24 +118,24 @@ export function FeedItemCard({
|
||||||
armColor.bg,
|
armColor.bg,
|
||||||
"bg-background/70"
|
"bg-background/70"
|
||||||
)}>
|
)}>
|
||||||
<CardHeader className="pb-0">
|
<CardHeader className="pb-0 p-3 sm:p-4 lg:p-6">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<div className="flex items-start justify-between gap-2 sm:gap-3 lg:gap-4">
|
||||||
<div className="flex flex-1 items-start gap-3">
|
<div className="flex flex-1 items-start gap-2 sm:gap-3">
|
||||||
<Avatar className="h-12 w-12 ring-2 ring-aethex-500/30">
|
<Avatar className="h-10 sm:h-12 w-10 sm:w-12 ring-2 ring-aethex-500/30 flex-shrink-0">
|
||||||
<AvatarImage
|
<AvatarImage
|
||||||
src={item.authorAvatar || undefined}
|
src={item.authorAvatar || undefined}
|
||||||
alt={item.authorName}
|
alt={item.authorName}
|
||||||
/>
|
/>
|
||||||
<AvatarFallback className="bg-aethex-500/10 text-aethex-300">
|
<AvatarFallback className="bg-aethex-500/10 text-aethex-300 text-xs sm:text-sm">
|
||||||
{item.authorName?.[0]?.toUpperCase() || "U"}
|
{item.authorName?.[0]?.toUpperCase() || "U"}
|
||||||
</AvatarFallback>
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<div className="min-w-0 flex-1 space-y-1">
|
<div className="min-w-0 flex-1 space-y-1">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-1 sm:gap-2 flex-wrap">
|
||||||
<CardTitle className="text-lg font-semibold text-foreground">
|
<CardTitle className="text-sm sm:text-base lg:text-lg font-semibold text-foreground truncate">
|
||||||
{item.authorName}
|
{item.authorName}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<Badge className={cn("text-xs font-bold uppercase", armColor.badge)}>
|
<Badge className={cn("text-xs font-bold uppercase px-2 py-0.5", armColor.badge)}>
|
||||||
{armLabel}
|
{armLabel}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -146,19 +146,20 @@ export function FeedItemCard({
|
||||||
variant={isFollowing ? "outline" : "default"}
|
variant={isFollowing ? "outline" : "default"}
|
||||||
onClick={() => onToggleFollow(item.authorId)}
|
onClick={() => onToggleFollow(item.authorId)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-full border-border/60 flex-shrink-0",
|
"rounded-full border-border/60 flex-shrink-0 text-xs sm:text-sm h-8 sm:h-9 px-3 sm:px-4",
|
||||||
isFollowing
|
isFollowing
|
||||||
? "bg-background/80 text-foreground"
|
? "bg-background/80 text-foreground"
|
||||||
: "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",
|
: "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{isFollowing ? "Following" : "Follow"}
|
<span className="hidden sm:inline">{isFollowing ? "Following" : "Follow"}</span>
|
||||||
|
<span className="sm:hidden">{isFollowing ? "✓" : "+"}</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-5">
|
<CardContent className="space-y-3 sm:space-y-4 lg:space-y-5 p-3 sm:p-4 lg:p-6">
|
||||||
{hasMedia && (
|
{hasMedia && (
|
||||||
<div className="relative w-full overflow-hidden rounded-2xl border border-border/40 bg-black/70 aspect-video max-h-96">
|
<div className="relative w-full overflow-hidden rounded-xl sm:rounded-2xl border border-border/40 bg-black/70 aspect-video max-h-96">
|
||||||
{item.mediaType === "video" ? (
|
{item.mediaType === "video" ? (
|
||||||
<>
|
<>
|
||||||
<video
|
<video
|
||||||
|
|
@ -193,22 +194,22 @@ export function FeedItemCard({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.caption && (
|
{item.caption && (
|
||||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
<p className="text-xs sm:text-sm leading-relaxed text-muted-foreground">
|
||||||
{item.caption}
|
{item.caption}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="rounded-2xl border border-border/40 bg-background/80 p-4">
|
<div className="rounded-xl sm:rounded-2xl border border-border/40 bg-background/80 p-2 sm:p-3 lg:p-4">
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 text-xs sm:text-sm text-muted-foreground">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-1 sm:gap-2 flex-wrap">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="gap-2 pl-2 pr-3"
|
className="gap-1 sm:gap-2 h-8 px-2 sm:px-3"
|
||||||
onClick={() => onLike(item.id)}
|
onClick={() => onLike(item.id)}
|
||||||
>
|
>
|
||||||
<Heart className="h-4 w-4 text-aethex-400" />
|
<Heart className="h-3 sm:h-4 w-3 sm:w-4 text-aethex-400" />
|
||||||
<span className="font-medium text-foreground">
|
<span className="font-medium text-foreground text-xs sm:text-sm">
|
||||||
{item.likes.toLocaleString()}
|
{item.likes.toLocaleString()}
|
||||||
</span>
|
</span>
|
||||||
<span className="hidden sm:inline">Like</span>
|
<span className="hidden sm:inline">Like</span>
|
||||||
|
|
@ -216,20 +217,20 @@ export function FeedItemCard({
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="gap-2 pl-2 pr-3"
|
className="gap-1 sm:gap-2 h-8 px-2 sm:px-3"
|
||||||
onClick={() => setShowComments((s) => !s)}
|
onClick={() => setShowComments((s) => !s)}
|
||||||
>
|
>
|
||||||
<MessageCircle className="h-4 w-4 text-aethex-400" />
|
<MessageCircle className="h-3 sm:h-4 w-3 sm:w-4 text-aethex-400" />
|
||||||
<span className="font-medium text-foreground">
|
<span className="font-medium text-foreground text-xs sm:text-sm">
|
||||||
{item.comments.toLocaleString()}
|
{item.comments.toLocaleString()}
|
||||||
</span>
|
</span>
|
||||||
<span className="hidden sm:inline">Comment</span>
|
<span className="hidden sm:inline">Comment</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1 sm:gap-2">
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-border/60 bg-background/60 text-xs uppercase tracking-wide"
|
className="border-border/60 bg-background/60 text-xs uppercase tracking-wide px-2 py-0.5"
|
||||||
>
|
>
|
||||||
{item.mediaType === "video"
|
{item.mediaType === "video"
|
||||||
? "Video"
|
? "Video"
|
||||||
|
|
@ -237,22 +238,22 @@ export function FeedItemCard({
|
||||||
? "Image"
|
? "Image"
|
||||||
: "Update"}
|
: "Update"}
|
||||||
</Badge>
|
</Badge>
|
||||||
<Separator orientation="vertical" className="h-6" />
|
<Separator orientation="vertical" className="h-4 sm:h-5" />
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="gap-2 pl-2 pr-3"
|
className="gap-1 sm:gap-2 h-8 px-2 sm:px-3"
|
||||||
onClick={() => onShare(item.id)}
|
onClick={() => onShare(item.id)}
|
||||||
>
|
>
|
||||||
<Share2 className="h-4 w-4" />
|
<Share2 className="h-3 sm:h-4 w-3 sm:w-4" />
|
||||||
Share
|
<span className="hidden sm:inline">Share</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showComments && (
|
{showComments && (
|
||||||
<div className="rounded-2xl border border-border/40 bg-background/80 p-4 space-y-3">
|
<div className="rounded-xl sm:rounded-2xl border border-border/40 bg-background/80 p-3 sm:p-4 space-y-2 sm:space-y-3">
|
||||||
<div className="space-y-2 max-h-60 overflow-auto pr-1">
|
<div className="space-y-2 max-h-60 overflow-auto pr-1">
|
||||||
{loadingComments ? (
|
{loadingComments ? (
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue