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

Refactor ParkOwnerCard to match ManufacturerCard

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 14:39:09 +00:00
parent 17e72c31ab
commit 0b9436e329
1 changed files with 77 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/park-owners/ParkOwnerCard.tsx
View File

@@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Building2, Star, MapPin } from 'lucide-react'; import { Building2, Star, MapPin } from 'lucide-react';
import { Company } from '@/types/database'; import { Company } from '@/types/database';
@@ -18,82 +17,94 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
}; };
const getCompanyIcon = () => { const getCompanyIcon = () => {
return <Building2 className="h-5 w-5" />; return <Building2 className="w-5 h-5" />;
}; };
return ( return (
<Card className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:-translate-y-1 group"> <Card
<CardHeader className="pb-3"> 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]"
<div className="flex items-start justify-between"> onClick={handleClick}
<div className="flex items-center space-x-3"> >
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors"> {/* Logo/Image Section */}
{company.logo_url ? ( <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
<img <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
src={company.logo_url}
alt={`${company.name} logo`} {/* Property Owner Badge */}
className="w-8 h-8 object-contain" <div className="absolute top-3 right-3 z-10">
/> <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
) : ( Property Owner
getCompanyIcon() </Badge>
)}
</div>
<div className="flex-1 min-w-0">
<CardTitle className="text-lg font-semibold truncate">
{company.name}
</CardTitle>
<div className="flex items-center gap-2 mt-1">
<Badge variant="secondary" className="text-xs">
Property Owner
</Badge>
{company.founded_year && (
<span className="text-xs text-muted-foreground">
Est. {company.founded_year}
</span>
)}
</div>
</div>
</div>
</div> </div>
</CardHeader>
{/* Logo Display */}
<CardContent className="pt-0"> <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">
<img
src={company.logo_url}
alt={`${company.name} logo`}
className="w-full h-full object-contain p-2"
/>
</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">
{getCompanyIcon()}
</div>
)}
</div>
</div>
<CardContent className="p-4 space-y-3">
{/* Company Name */}
<h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
{company.name}
</h3>
{/* Description */}
{company.description && ( {company.description && (
<p className="text-sm text-muted-foreground mb-4 line-clamp-2"> <p className="text-sm text-muted-foreground line-clamp-2">
{company.description} {company.description}
</p> </p>
)} )}
<div className="space-y-2 mb-4"> {/* Company Info */}
{company.headquarters_location && ( <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
<div className="flex items-center text-sm text-muted-foreground"> {company.founded_year && (
<MapPin className="h-4 w-4 mr-2 flex-shrink-0" /> <div className="flex items-center gap-1">
<span className="truncate">{company.headquarters_location}</span> <span className="text-muted-foreground">Founded:</span>
<span className="font-medium">{company.founded_year}</span>
</div> </div>
)} )}
<div className="flex items-center text-sm text-muted-foreground"> {company.headquarters_location && (
<Star className="h-4 w-4 mr-2 flex-shrink-0" /> <div className="flex items-center gap-1">
<span> <MapPin className="w-3 h-3 text-muted-foreground" />
{company.average_rating > 0 <span className="text-muted-foreground truncate">
? `${company.average_rating.toFixed(1)} rating` {company.headquarters_location}
: 'No ratings yet' </span>
} </div>
{company.review_count > 0 && ( )}
<span className="ml-1"> </div>
({company.review_count} review{company.review_count !== 1 ? 's' : ''})
</span> {/* Rating */}
)} {company.average_rating > 0 && (
</span> <div className="flex items-center gap-1">
</div> <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
<span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
<span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
</div>
)}
{/* Park Count Stats */}
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
{(company as any).park_count > 0 && (
<div className="flex items-center gap-1">
<Building2 className="w-3 h-3 text-muted-foreground" />
<span className="font-medium">{(company as any).park_count}</span>
<span className="text-muted-foreground">parks owned</span>
</div>
)}
</div> </div>
<Button
onClick={handleClick}
className="w-full"
variant="outline"
>
View Owned Parks
</Button>
</CardContent> </CardContent>
</Card> </Card>
); );