pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 18:11:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Implement grid tab layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 13:44:30 +00:00
parent 60cbc1fd4f
commit 8406d66096
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/homepage/ContentTabs.tsx
View File

@@ -346,35 +346,35 @@ export function ContentTabs() {
<div className="container mx-auto px-4">
<Tabs defaultValue="trending-parks" className="w-full">
<div className="text-center mb-8">
<TabsList className="inline-flex flex-wrap justify-center gap-1.5 sm:gap-2 md:gap-3 p-1.5 sm:p-2 md:p-3 bg-muted/30 rounded-lg max-w-5xl mx-auto">
<TabsTrigger value="trending-parks" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsList className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 p-3 bg-muted/30 rounded-lg max-w-6xl mx-auto">
<TabsTrigger value="trending-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Trending Parks
</TabsTrigger>
<TabsTrigger value="trending-rides" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="trending-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Trending Rides
</TabsTrigger>
<TabsTrigger value="recent-parks" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="recent-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
New Parks
</TabsTrigger>
<TabsTrigger value="recent-rides" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="recent-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
New Rides
</TabsTrigger>
<TabsTrigger value="recent-changes" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="recent-changes" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Recent Changes
</TabsTrigger>
<TabsTrigger value="recently-opened" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="recently-opened" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Recently Opened
</TabsTrigger>
<TabsTrigger value="highest-rated-parks" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="highest-rated-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Top Parks
</TabsTrigger>
<TabsTrigger value="highest-rated-rides" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="highest-rated-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Top Rides
</TabsTrigger>
<TabsTrigger value="opening-soon" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="opening-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Opening Soon
</TabsTrigger>
<TabsTrigger value="closing-soon" className="px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors whitespace-nowrap">
<TabsTrigger value="closing-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center">
Closing Soon
</TabsTrigger>
</TabsList>