Spaces:
Running
Running
File size: 3,266 Bytes
464b1e9 | 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'
export default function SeedCard({ seed, onInquiry }) {
const [quantity, setQuantity] = useState(1)
const getCategoryColor = (category) => {
const colors = {
'धान': 'bg-blue-100 text-blue-800',
'गेहूं': 'bg-amber-100 text-amber-800',
'मक्का': 'bg-yellow-100 text-yellow-800',
'दालें': 'bg-green-100 text-green-800',
'सब्जी': 'bg-red-100 text-red-800',
'तेल': 'bg-purple-100 text-purple-800',
}
return colors[category] || 'bg-gray-100 text-gray-800'
}
return (
<div className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1">
<div className="relative h-48 bg-gradient-to-br from-kisan-light/20 to-kisan-green/20 flex items-center justify-center">
<span className="text-6xl">{seed.icon}</span>
<span className={`absolute top-3 right-3 px-3 py-1 rounded-full text-xs font-semibold ${getCategoryColor(seed.category)}`}>
{seed.category}
</span>
</div>
<div className="p-5">
<h3 className="text-xl font-bold text-kisan-soil mb-1">{seed.name}</h3>
<p className="text-gray-500 text-sm mb-3">{seed.hindiName}</p>
<div className="space-y-2 mb-4">
<div className="flex justify-between text-sm">
<span className="text-gray-600">उपज:</span>
<span className="font-semibold text-kisan-green">{seed.yield}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">अवधि:</span>
<span className="font-semibold text-kisan-green">{seed.duration}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">मौसम:</span>
<span className="font-semibold text-kisan-green">{seed.season}</span>
</div>
</div>
<div className="flex items-center justify-between mb-4">
<div>
<span className="text-2xl font-bold text-kisan-green">₹{seed.price}</span>
<span className="text-gray-500 text-sm">/{seed.unit}</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => setQuantity(Math.max(1, quantity - 1))}
className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"
>
-
</button>
<span className="w-8 text-center font-semibold">{quantity}</span>
<button
onClick={() => setQuantity(quantity + 1)}
className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"
>
+
</button>
</div>
</div>
<button
onClick={() => onInquiry(seed, quantity)}
className="w-full bg-kisan-green text-white py-3 rounded-xl font-semibold hover:bg-kisan-dark transition flex items-center justify-center gap-2"
>
<span>📩</span> पूछताछ करें
</button>
</div>
</div>
)
} |