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

Refactor: Improve mobile header and navigation

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 11:59:31 +00:00
parent 556d1c5a97
commit 28ab241bb7
8 changed files with 523 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/manufacturers/ManufacturerCard.tsx
View File

@@ -35,7 +35,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
return (
<Card
className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 cursor-pointer active:scale-[0.98] md:hover:scale-[1.02]"
onClick={handleClick}
>
{/* Logo/Image Section */}
@@ -43,8 +43,8 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
{/* Company Type Badge */}
<div className="absolute top-3 right-3 z-10">
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
<div className="absolute top-2 right-2 md:top-3 md:right-3 z-10">
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm text-xs">
{formatCompanyType(company.company_type)}
</Badge>
</div>
@@ -52,7 +52,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
{/* Logo Display */}
<div className="absolute inset-0 flex items-center justify-center">
{company.logo_url ? (
<div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
<div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
<img
src={company.logo_url}
alt={`${company.name} logo`}
@@ -60,28 +60,28 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
/>
</div>
) : (
<div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
<div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
{getCompanyIcon(company.company_type)}
</div>
)}
</div>
</div>
<CardContent className="p-4 space-y-3">
<CardContent className="p-3 md:p-4 space-y-2 md:space-y-3">
{/* Company Name */}
<h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
<h3 className="text-base md:text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[2.5rem] md:min-h-[3rem]">
{company.name}
</h3>
{/* Description */}
{company.description && (
<p className="text-sm text-muted-foreground line-clamp-2">
<p className="text-xs md:text-sm text-muted-foreground line-clamp-2">
{company.description}
</p>
)}
{/* Company Info */}
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
<div className="flex flex-wrap gap-x-3 md:gap-x-4 gap-y-1 text-xs md:text-sm">
{company.founded_year && (
<div className="flex items-center gap-1">
<span className="text-muted-foreground">Founded:</span>
@@ -90,8 +90,8 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
)}
{company.headquarters_location && (
<div className="flex items-center gap-1">
<MapPin className="w-3 h-3 text-muted-foreground" />
<div className="flex items-center gap-1 min-w-0">
<MapPin className="w-3 h-3 text-muted-foreground shrink-0" />
<span className="text-muted-foreground truncate">
{company.headquarters_location}
</span>
@@ -102,16 +102,16 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
{/* Rating */}
{company.average_rating > 0 && (
<div className="flex items-center gap-1">
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
<span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
<Star className="w-3.5 h-3.5 md:w-4 md:h-4 fill-yellow-400 text-yellow-400" />
<span className="text-xs md:text-sm font-medium">{company.average_rating.toFixed(1)}</span>
{company.review_count > 0 && (
<span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
<span className="text-xs text-muted-foreground">({company.review_count})</span>
)}
</div>
)}
{/* Stats Display */}
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
<div className="flex flex-wrap gap-x-3 md:gap-x-4 gap-y-1 text-xs md:text-sm">
{(company as any).ride_count > 0 && (
<div className="flex items-center gap-1">
<FerrisWheel className="w-3 h-3 text-muted-foreground" />