Spaces:
Build error
Build error
| import { motion } from 'framer-motion'; | |
| import { useState } from 'react'; | |
| export default function BuildingCard({ building, onPurchase, resources }) { | |
| const [isPurchasing, setIsPurchasing] = useState(false); | |
| const canAfford = building.cost.every(cost => { | |
| const resource = resources.find(r => r.name === cost.name); | |
| return resource && resource.amount >= cost.amount; | |
| }); | |
| const handlePurchase = () => { | |
| if (canAfford && !isPurchasing) { | |
| setIsPurchasing(true); | |
| setTimeout(() => { | |
| onPurchase(building); | |
| setIsPurchasing(false); | |
| }, 500); | |
| } | |
| }; | |
| return ( | |
| <motion.div | |
| whileHover={{ scale: 1.02 }} | |
| className="bg-space-dark/50 border border-space-blue/30 rounded-lg p-4 flex flex-col" | |
| > | |
| <div className="flex justify-between items-start mb-3"> | |
| <h3 className="text-lg font-semibold text-space-gold">{building.name}</h3> | |
| <div className="text-right"> | |
| <div className="text-xs text-space-blue/70">Level {building.level}</div> | |
| <div className="text-xs text-space-gold"> | |
| +{building.production}/s | |
| </div> | |
| </div> | |
| </div> | |
| <div className="mb-3"> | |
| <p className="text-sm text-space-blue/80 mb-2">{building.description}</p> | |
| <div className="flex flex-wrap gap-2 mb-3"> | |
| {building.cost.map((cost, index) => { | |
| const resource = resources.find(r => r.name === cost.name); | |
| const hasEnough = resource && resource.amount >= cost.amount; | |
| return ( | |
| <div | |
| key={index} | |
| className={`flex items-center space-x-1 px-2 py-1 rounded text-xs ${ | |
| hasEnough ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300' | |
| }`} | |
| > | |
| <cost.icon size={12} /> | |
| <span>{cost.amount}</span> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| <motion.button | |
| whileTap={{ scale: 0.98 }} | |
| onClick={handlePurchase} | |
| disabled={!canAfford || isPurchasing} | |
| className={`w-full py-2 rounded-lg font-medium transition-all ${ | |
| canAfford | |
| ? 'bg-space-gold text-space-dark hover:bg-yellow-400' | |
| : 'bg-gray-600 text-gray-400 cursor-not-allowed' | |
| } ${isPurchasing ? 'animate-pulse' : ''}`} | |
| > | |
| {isPurchasing ? 'Purchasing...' : `Buy (${building.cost[0].amount} ${building.cost[0].name})`} | |
| </motion.button> | |
| </motion.div> | |
| ); | |
| } |