Initial commit: OSSM Configurator with share and export functionality

website/src/components/steps/PowerSupplyStep.jsx

@@ -0,0 +1,136 @@
+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>
+  );
+}