feat: Create ParkOwner card component

2025-12-23 18:31:12 -05:00 · 2025-09-29 14:14:59 +00:00
parent 3a2066fd5e
commit 17e72c31ab
3 changed files with 279 additions and 0 deletions
--- a/src/components/park-owners/ParkOwnerCard.tsx
+++ b/src/components/park-owners/ParkOwnerCard.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Building2, Star, MapPin } from 'lucide-react';
+import { Company } from '@/types/database';
+
+interface ParkOwnerCardProps {
+  company: Company;
+}
+
+const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/owners/${company.slug}/parks/`);
+  };
+
+  const getCompanyIcon = () => {
+    return <Building2 className="h-5 w-5" />;
+  };
+
+  return (
+    <Card className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:-translate-y-1 group">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <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">
+              {company.logo_url ? (
+                <img 
+                  src={company.logo_url} 
+                  alt={`${company.name} logo`}
+                  className="w-8 h-8 object-contain"
+                />
+              ) : (
+                getCompanyIcon()
+              )}
+            </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>
+      </CardHeader>
+      
+      <CardContent className="pt-0">
+        {company.description && (
+          <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+            {company.description}
+          </p>
+        )}
+        
+        <div className="space-y-2 mb-4">
+          {company.headquarters_location && (
+            <div className="flex items-center text-sm text-muted-foreground">
+              <MapPin className="h-4 w-4 mr-2 flex-shrink-0" />
+              <span className="truncate">{company.headquarters_location}</span>
+            </div>
+          )}
+          
+          <div className="flex items-center text-sm text-muted-foreground">
+            <Star className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span>
+              {company.average_rating > 0 
+                ? `${company.average_rating.toFixed(1)} rating`
+                : 'No ratings yet'
+              }
+              {company.review_count > 0 && (
+                <span className="ml-1">
+                  ({company.review_count} review{company.review_count !== 1 ? 's' : ''})
+                </span>
+              )}
+            </span>
+          </div>
+        </div>
+        
+        <Button 
+          onClick={handleClick}
+          className="w-full"
+          variant="outline"
+        >
+          View Owned Parks
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ParkOwnerCard;