Spaces:
Build error
Build error
File size: 2,855 Bytes
a1a9b91 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Vehicle } from '@/data/vehicles';
import { ChevronRight } from 'lucide-react';
interface VehicleCardProps {
vehicle: Vehicle;
}
const VehicleCard = ({ vehicle }: VehicleCardProps) => {
const [isHovered, setIsHovered] = useState(false);
return (
<div
className="bg-[#161617] rounded-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-900/10"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<div className="relative">
<div className={`h-52 bg-gradient-to-br from-[#202022] to-[#121214] overflow-hidden flex items-center justify-center transition-transform duration-500 ${isHovered ? 'scale-105' : 'scale-100'}`}>
<img
src={vehicle.image}
alt={`${vehicle.name} ${vehicle.model}`}
className="h-40 object-contain transform transition-all duration-500"
/>
</div>
<div className="absolute top-3 right-3 bg-blue-600/80 text-xs font-bold text-white px-2 py-1 rounded">
{vehicle.category}
</div>
</div>
<div className="p-5">
<div className="mb-4">
<h3 className="text-xl font-bold text-white">
{vehicle.name} {vehicle.model}
</h3>
<p className="text-gray-400 text-sm mt-1 line-clamp-2">
{vehicle.description}
</p>
</div>
<div className="flex justify-between items-center mb-4">
<div>
<span className="text-2xl font-bold text-white">${vehicle.price}</span>
<span className="text-gray-400 text-sm">/day</span>
</div>
<div className="text-right">
<span className="text-gray-400 text-sm">Subscription</span>
<p className="text-gray-300 font-medium">${vehicle.pricePerMonth}/mo</p>
</div>
</div>
<div className="grid grid-cols-2 gap-2 mb-5">
<div className="bg-[#1a1a1c] p-2 rounded text-center">
<p className="text-xs text-gray-400">Range</p>
<p className="text-sm font-medium text-white">{vehicle.specs.range}</p>
</div>
<div className="bg-[#1a1a1c] p-2 rounded text-center">
<p className="text-xs text-gray-400">0-60 mph</p>
<p className="text-sm font-medium text-white">{vehicle.specs.acceleration}</p>
</div>
</div>
<Link
to={`/vehicles/${vehicle.id}`}
className="bg-blue-600 hover:bg-blue-700 w-full py-3 rounded-md font-medium transition-colors text-white flex items-center justify-center gap-1"
>
View Details
<ChevronRight size={16} />
</Link>
</div>
</div>
);
};
export default VehicleCard;
|