137 lines
5.2 KiB
JavaScript
137 lines
5.2 KiB
JavaScript
import partsData from '../../data/index.js';
|
|
import { formatPrice } from '../../utils/priceFormat';
|
|
|
|
export default function PowerSupplyStep({ config, updateConfig }) {
|
|
const selectedPowerSupplyId = config.powerSupply?.id;
|
|
const selectedMotorId = config.motor?.id;
|
|
|
|
const handleSelect = (powerSupply) => {
|
|
updateConfig({ powerSupply });
|
|
};
|
|
|
|
// Filter compatible power supplies
|
|
const compatiblePowerSupplies = partsData.powerSupplies.filter((psu) => {
|
|
if (!selectedMotorId) return true;
|
|
return psu.compatibleMotors.includes(selectedMotorId);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4">Select Power Supply</h2>
|
|
<p className="text-gray-600 mb-6">
|
|
Choose a compatible power supply for your selected motor.
|
|
</p>
|
|
|
|
{selectedMotorId && (
|
|
<div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<p className="text-sm text-blue-800">
|
|
Showing power supplies compatible with:{' '}
|
|
<span className="font-semibold">
|
|
{config.motor?.name || 'Selected Motor'}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{compatiblePowerSupplies.map((powerSupply) => (
|
|
<button
|
|
key={powerSupply.id}
|
|
onClick={() => handleSelect(powerSupply)}
|
|
className={`p-6 border-2 rounded-lg text-left transition-all ${
|
|
selectedPowerSupplyId === powerSupply.id
|
|
? 'border-blue-600 bg-blue-50'
|
|
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{powerSupply.image && (
|
|
<div className="mb-4 flex justify-center">
|
|
<img
|
|
src={powerSupply.image}
|
|
alt={powerSupply.name}
|
|
className="h-32 w-32 object-contain rounded-lg bg-gray-100"
|
|
onError={(e) => {
|
|
e.target.style.display = 'none';
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex items-start justify-between mb-2">
|
|
<h3 className="text-lg font-semibold text-gray-900">
|
|
{powerSupply.name}
|
|
</h3>
|
|
{selectedPowerSupplyId === powerSupply.id && (
|
|
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<svg
|
|
className="w-4 h-4 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600 mb-3">
|
|
{powerSupply.description}
|
|
</p>
|
|
<div className="flex gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-500">Voltage:</span>{' '}
|
|
<span className="font-medium">{powerSupply.voltage}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Current:</span>{' '}
|
|
<span className="font-medium">{powerSupply.current}</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 flex items-center justify-between">
|
|
<div className="text-lg font-bold text-blue-600">
|
|
{formatPrice(powerSupply.price)}
|
|
</div>
|
|
</div>
|
|
{powerSupply.links && powerSupply.links.length > 0 && (
|
|
<div className="mt-3 pt-3 border-t border-gray-200">
|
|
<p className="text-xs text-gray-500 mb-2">Buy from:</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{powerSupply.links.map((link, index) => (
|
|
<a
|
|
key={index}
|
|
href={link.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 hover:text-blue-800 transition-colors"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<svg
|
|
className="w-3 h-3 mr-1.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
|
/>
|
|
</svg>
|
|
{link.store}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|