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

Make tab list horizontally scrollable

Browse source 
cgen-348e3a683da44c9482be7a3376b318eb
This commit is contained in:
Builder.io 2025-10-13 23:16:40 +00:00
parent e884b37b07
commit 7d56af688c
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/pages/Community.tsx
View file

@ -1771,17 +1771,19 @@ export default function Community() {
className="space-y-12" className="space-y-12"
> >
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<TabsList className="flex w-full flex-wrap gap-2 rounded-2xl border border-border/60 bg-background/60 p-2"> <div className="overflow-x-auto pb-2">
{communityTabItems.map((tab) => ( <TabsList className="flex w-max flex-nowrap gap-2 rounded-2xl border border-border/60 bg-background/60 p-2">
<TabsTrigger {communityTabItems.map((tab) => (
key={tab.id} <TabsTrigger
value={tab.id} key={tab.id}
className="rounded-xl px-4 py-2 text-sm font-semibold text-muted-foreground transition data-[state=active]:bg-gradient-to-r data-[state=active]:from-aethex-500/20 data-[state=active]:to-neon-blue/20 data-[state=active]:text-foreground data-[state=active]:shadow" value={tab.id}
> className="rounded-xl px-4 py-2 text-sm font-semibold text-muted-foreground transition data-[state=active]:bg-gradient-to-r data-[state=active]:from-aethex-500/20 data-[state=active]:to-neon-blue/20 data-[state=active]:text-foreground data-[state=active]:shadow"
{tab.label} >
</TabsTrigger> {tab.label}
))} </TabsTrigger>
</TabsList> ))}
</TabsList>
</div>
</div> </div>
<TabsContent value="new-members" className="mt-0"> <TabsContent value="new-members" className="mt-0">