Asep Haryana Saputra
b713b72d2d
- Add flex-wrap and min-w-0 to prevent RiskBadge from overflowing the card boundary when commonName is long (e.g., Northern/Southern Leaf Blight) - Fix both catalog-page.tsx and disease-card.tsx for consistency
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import type { DiseaseCatalogItem } from '@zeavis/shared';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { RiskBadge } from '@/components/risk-badge';
|
|
|
|
export interface DiseaseCardProps {
|
|
disease: DiseaseCatalogItem;
|
|
}
|
|
|
|
export function DiseaseCard({ disease }: DiseaseCardProps) {
|
|
const firstTwoSymptoms = disease.symptoms.slice(0, 2);
|
|
|
|
return (
|
|
<Link to={`/catalog/${disease.slug}`} className="block transition-transform hover:scale-105">
|
|
<Card className="h-full">
|
|
<CardHeader>
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div className="min-w-0 flex-1">
|
|
<CardTitle className="text-xl">{disease.commonName}</CardTitle>
|
|
<CardDescription className="mt-1">{disease.label}</CardDescription>
|
|
</div>
|
|
<RiskBadge level={disease.riskLevel} />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<p className="text-sm text-muted-foreground">{disease.summary}</p>
|
|
|
|
<div>
|
|
<h4 className="mb-2 text-sm font-semibold">Gejala:</h4>
|
|
<ul className="space-y-1">
|
|
{firstTwoSymptoms.map((symptom, index) => (
|
|
<li key={index} className="text-sm text-muted-foreground">
|
|
• {symptom}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|