AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

completionId: cgen-cb7065e496f245fa881328a1718313df

Browse source 
cgen-cb7065e496f245fa881328a1718313df
This commit is contained in:
Builder.io 2025-11-14 23:02:44 +00:00
parent 6794c63ac7
commit ba67edf198
1 changed files with 34 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
client/pages/Feed.tsx
View file

@ -470,24 +470,24 @@ export default function Feed() {
return ( return (
<Layout> <Layout>
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)]"> <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)]">
<div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 pb-16 pt-10 lg:px-6"> <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 sm:gap-6 lg:gap-8 px-3 sm:px-4 pb-16 pt-6 sm:pt-10 lg:px-6">
<section className="relative overflow-hidden rounded-3xl border border-border/40 bg-background/80 p-8 shadow-2xl backdrop-blur"> <section className="relative overflow-hidden rounded-2xl sm:rounded-3xl border border-border/40 bg-background/80 p-4 sm:p-6 lg:p-8 shadow-2xl backdrop-blur">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(96,189,255,0.18),transparent_60%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(96,189,255,0.18),transparent_60%)]" />
<div className="relative z-10 flex flex-col gap-6"> <div className="relative z-10 flex flex-col gap-6">
<div className="flex flex-wrap items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
<div> <div className="flex-1">
<h1 className="text-3xl font-semibold text-foreground sm:text-4xl"> <h1 className="text-2xl sm:text-3xl lg:text-4xl font-semibold text-foreground">
Community Pulse Community Pulse
</h1> </h1>
<p className="mt-2 max-w-2xl text-sm text-muted-foreground sm:text-base"> <p className="mt-1 sm:mt-2 max-w-2xl text-xs sm:text-sm lg:text-base text-muted-foreground">
Discover new creations, amplify your voice, and engage with Discover new creations, amplify your voice, and engage with
the AeThex community in real time. the AeThex community in real time.
</p> </p>
</div> </div>
<div className="flex flex-wrap items-center gap-3"> <div className="flex flex-wrap items-center gap-2 sm:gap-3">
<Badge <Badge
variant="outline" variant="outline"
className="border-aethex-400/60 bg-aethex-400/10 text-aethex-100" className="border-aethex-400/60 bg-aethex-400/10 text-aethex-100 text-xs sm:text-sm"
> >
Live updates enabled Live updates enabled
</Badge> </Badge>
@ -495,15 +495,15 @@ export default function Feed() {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={handleManualRefresh} onClick={handleManualRefresh}
className="gap-2 rounded-full border-border/60 bg-background/80 backdrop-blur" className="gap-1 sm:gap-2 rounded-full border-border/60 bg-background/80 backdrop-blur text-xs sm:text-sm"
> >
<RotateCcw className="h-4 w-4" /> Refresh <RotateCcw className="h-3 sm:h-4 w-3 sm:w-4" /> <span className="hidden sm:inline">Refresh</span>
</Button> </Button>
</div> </div>
</div> </div>
<div className="space-y-3"> <div className="space-y-2 sm:space-y-3">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
{[ {[
{ {
key: "all" as const, key: "all" as const,
@ -530,13 +530,13 @@ export default function Feed() {
size="sm" size="sm"
onClick={() => setActiveFilter(key)} onClick={() => setActiveFilter(key)}
className={cn( className={cn(
"flex items-center gap-2 rounded-full border-border/50 px-4", "flex items-center gap-1 sm:gap-2 rounded-full border-border/50 px-2.5 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm",
activeFilter === key activeFilter === key
? "bg-gradient-to-r from-aethex-500 to-neon-blue text-white shadow-lg" ? "bg-gradient-to-r from-aethex-500 to-neon-blue text-white shadow-lg"
: "bg-background/80 text-muted-foreground backdrop-blur", : "bg-background/80 text-muted-foreground backdrop-blur",
)} )}
> >
<Icon className="h-4 w-4" /> <Icon className="h-3 sm:h-4 w-3 sm:w-4" />
<span className="font-medium">{label}</span> <span className="font-medium">{label}</span>
<span className="hidden text-xs sm:inline"> <span className="hidden text-xs sm:inline">
{description} {description}
@ -545,21 +545,21 @@ export default function Feed() {
))} ))}
</div> </div>
<div className="space-y-3"> <div className="space-y-2 sm:space-y-3">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2 text-xs">
<span className="text-xs uppercase text-muted-foreground font-semibold">Filter by Arms</span> <span className="uppercase text-muted-foreground font-semibold">Filter by Arms</span>
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
onClick={() => setShowArmFollowManager(!showArmFollowManager)} onClick={() => setShowArmFollowManager(!showArmFollowManager)}
className="text-xs text-aethex-200 hover:text-aethex-100" className="text-xs text-aethex-200 hover:text-aethex-100 h-auto p-1"
> >
{showArmFollowManager ? "Hide" : "Manage Follows"} {showArmFollowManager ? "Hide" : "Manage"}
</Button> </Button>
</div> </div>
<div className="overflow-x-auto scrollbar-hide"> <div className="overflow-x-auto scrollbar-hide">
<div className="flex items-center gap-2 pb-2 min-w-min"> <div className="flex items-center gap-1.5 sm:gap-2 pb-2 min-w-min">
{ARMS.map((arm) => ( {ARMS.map((arm) => (
<Button <Button
key={arm.id} key={arm.id}
@ -575,7 +575,7 @@ export default function Feed() {
) )
} }
className={cn( className={cn(
"flex items-center gap-1 sm:gap-2 rounded-full border-border/50 px-2.5 sm:px-3 py-1.5 text-xs whitespace-nowrap flex-shrink-0", "flex items-center gap-0.5 sm:gap-1.5 rounded-full border-border/50 px-2 sm:px-3 py-1.5 text-xs whitespace-nowrap flex-shrink-0",
selectedArms.includes(arm.id) selectedArms.includes(arm.id)
? "bg-gradient-to-r from-aethex-600 to-neon-blue text-white shadow-md" ? "bg-gradient-to-r from-aethex-600 to-neon-blue text-white shadow-md"
: "bg-background/60 text-muted-foreground backdrop-blur hover:border-border", : "bg-background/60 text-muted-foreground backdrop-blur hover:border-border",
@ -593,11 +593,11 @@ export default function Feed() {
</div> </div>
{showArmFollowManager && user?.id && ( {showArmFollowManager && user?.id && (
<div className="rounded-2xl border border-border/40 bg-background/60 p-4 space-y-3"> <div className="rounded-xl sm:rounded-2xl border border-border/40 bg-background/60 p-3 sm:p-4 space-y-2 sm:space-y-3">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground leading-relaxed">
✨ Follow arms to personalize your feed. Only posts from followed arms will appear in your "Following" tab. ✨ Follow arms to personalize your feed. Only posts from followed arms will appear in your "Following" tab.
</p> </p>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-3 gap-1.5 sm:gap-2">
{ARMS.map((arm) => ( {ARMS.map((arm) => (
<Button <Button
key={arm.id} key={arm.id}
@ -622,19 +622,19 @@ export default function Feed() {
</div> </div>
</section> </section>
<div className="grid gap-6 lg:grid-cols-[minmax(0,2.2fr)_minmax(280px,1fr)]"> <div className="grid gap-4 sm:gap-6 lg:grid-cols-[minmax(0,2.2fr)_minmax(280px,1fr)]">
<div className="space-y-6"> <div className="space-y-4 sm:space-y-6">
<div <div
ref={composerRef} ref={composerRef}
id="feed-composer" id="feed-composer"
className="space-y-3 sm:space-y-4 rounded-3xl border border-border/40 bg-background/70 p-3 sm:p-4 shadow-xl backdrop-blur-lg lg:sticky lg:top-6" className="space-y-2 sm:space-y-3 rounded-2xl sm:rounded-3xl border border-border/40 bg-background/70 p-3 sm:p-4 shadow-xl backdrop-blur-lg lg:sticky lg:top-6"
> >
<div className="flex items-start justify-between gap-2 sm:gap-3"> <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-3">
<div> <div className="flex-1">
<h2 className="text-base sm:text-lg font-semibold text-foreground"> <h2 className="text-sm sm:text-base lg:text-lg font-semibold text-foreground">
Share something new Share something new
</h2> </h2>
<p className="text-xs sm:text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
Post updates or spark a conversation Post updates or spark a conversation
</p> </p>
</div> </div>
@ -642,7 +642,7 @@ export default function Feed() {
variant="secondary" variant="secondary"
size="sm" size="sm"
onClick={() => setShowPostComposer(true)} onClick={() => setShowPostComposer(true)}
className="rounded-full bg-aethex-500/20 text-aethex-100 hover:bg-aethex-500/30 text-xs sm:text-sm" className="rounded-full bg-aethex-500/20 text-aethex-100 hover:bg-aethex-500/30 text-xs sm:text-sm whitespace-nowrap"
> >
Compose Compose
</Button> </Button>
@ -663,9 +663,9 @@ export default function Feed() {
} }
onSuccess={handlePostSuccess} onSuccess={handlePostSuccess}
/> />
<div className="flex flex-wrap items-center justify-between gap-2 sm:gap-3 rounded-2xl border border-border/30 bg-background/60 p-3 sm:p-4 text-xs sm:text-sm text-muted-foreground"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 rounded-xl sm:rounded-2xl border border-border/30 bg-background/60 p-2.5 sm:p-3 lg:p-4 text-xs text-muted-foreground">
<div className="flex items-center gap-1 sm:gap-2"> <div className="flex items-center gap-1 sm:gap-2">
<Sparkles className="h-3.5 sm:h-4 w-3.5 sm:w-4 text-aethex-300" /> <Sparkles className="h-3 sm:h-3.5 lg:h-4 w-3 sm:w-3.5 lg:w-4 text-aethex-300 flex-shrink-0" />
<span className="hidden sm:inline"> <span className="hidden sm:inline">
Your post is shared instantly with followers and the Your post is shared instantly with followers and the
broader community. broader community.