49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Shield } from 'lucide-react';
|
|
import type { Wildlife } from '@/lib/api';
|
|
|
|
const statusColor: Record<string, string> = {
|
|
'Threatened': 'bg-red-500/20 text-red-400 border-red-500/30',
|
|
'Protected': 'bg-amber-500/20 text-amber-400 border-amber-500/30',
|
|
'Least Concern': 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
|
|
'Endangered': 'bg-red-700/30 text-red-300 border-red-600/30',
|
|
};
|
|
|
|
export default function WildlifeCard({ species }: { species: Wildlife }) {
|
|
const colors = statusColor[species.status] ?? 'bg-stone-500/20 text-stone-400 border-stone-500/30';
|
|
return (
|
|
<div className="bg-surfaceGreen border border-white/5 rounded-2xl overflow-hidden hover:border-gold/20 transition-all group">
|
|
{/* Image */}
|
|
<div className="aspect-[4/3] bg-black/40 overflow-hidden">
|
|
{species.imageUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={species.imageUrl}
|
|
alt={species.name}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-6xl">🦉</div>
|
|
)}
|
|
</div>
|
|
<div className="p-5 space-y-3">
|
|
{/* Status */}
|
|
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border ${colors}`}>
|
|
<Shield size={10} />
|
|
{species.status}
|
|
</span>
|
|
<div>
|
|
<h3 className="font-bold text-white text-lg leading-tight">{species.name}</h3>
|
|
<p className="text-xs text-stone-500 italic mt-0.5">{species.scientificName}</p>
|
|
</div>
|
|
<p className="text-sm text-stone-400 leading-relaxed line-clamp-3">{species.description}</p>
|
|
<div className="pt-2 border-t border-white/5">
|
|
<p className="text-xs text-stone-500 font-medium">
|
|
<span className="text-stone-400">Habitat: </span>{species.habitat}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|