Initial commit: OSSM Configurator with share and export functionality
This commit is contained in:
MunchDev-oss
159
website/src/components/steps/MotorStep.jsx
Normal file
159
website/src/components/steps/MotorStep.jsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import partsData from '../../data/index.js';
|
||||
import { formatPrice } from '../../utils/priceFormat';
|
||||
|
||||
export default function MotorStep({ config, updateConfig }) {
|
||||
const selectedMotorId = config.motor?.id;
|
||||
|
||||
const handleSelect = (motor) => {
|
||||
updateConfig({ motor });
|
||||
};
|
||||
|
||||
const recommendedMotors = partsData.motors.filter(m => m.recommended);
|
||||
const otherMotors = partsData.motors.filter(m => !m.recommended);
|
||||
const hasSingleRecommended = recommendedMotors.length === 1;
|
||||
|
||||
const renderMotorCard = (motor, isRecommended = false, isSlightlyLarger = false) => (
|
||||
<button
|
||||
key={motor.id}
|
||||
onClick={() => handleSelect(motor)}
|
||||
className={`${isSlightlyLarger ? 'p-5' : 'p-4'} border-2 rounded-lg text-left transition-all ${
|
||||
selectedMotorId === motor.id
|
||||
? 'border-blue-600 bg-blue-50 shadow-lg'
|
||||
: motor.recommended
|
||||
? 'border-green-500 bg-green-50 hover:border-green-600 hover:bg-green-100'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{motor.recommended && (
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<span className="inline-flex items-center px-3 py-1 text-xs font-semibold text-green-800 bg-green-200 rounded-full">
|
||||
⭐ Recommended
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{motor.image && (
|
||||
<div className={`${isSlightlyLarger ? 'mb-4' : 'mb-3'} flex justify-center`}>
|
||||
<img
|
||||
src={motor.image}
|
||||
alt={motor.name}
|
||||
className={`${isSlightlyLarger ? 'h-32 w-32' : 'h-24 w-24'} 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={`${isSlightlyLarger ? 'text-lg' : 'text-base'} font-semibold text-gray-900`}>
|
||||
{motor.name}
|
||||
</h3>
|
||||
{selectedMotorId === motor.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={`${isSlightlyLarger ? 'text-sm' : 'text-sm'} text-gray-600 mb-3`}>{motor.description}</p>
|
||||
<div className={`flex ${isSlightlyLarger ? 'gap-4' : 'gap-3'} text-sm`}>
|
||||
<div>
|
||||
<span className="text-gray-500">Speed:</span>{' '}
|
||||
<span className="font-medium">{motor.speed}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Wattage:</span>{' '}
|
||||
<span className="font-medium">{motor.wattage}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Gear Count:</span>{' '}
|
||||
<span className="font-medium">{motor.gear_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${isSlightlyLarger ? 'mt-3' : 'mt-2'} flex items-center justify-between`}>
|
||||
<div className={`${isSlightlyLarger ? 'text-lg' : 'text-lg'} font-bold text-blue-600`}>
|
||||
{formatPrice(motor.price)}
|
||||
</div>
|
||||
</div>
|
||||
{motor.links && motor.links.length > 0 && (
|
||||
<div className={`${isSlightlyLarger ? 'mt-3' : 'mt-2'} 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">
|
||||
{motor.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>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Select Motor</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Choose the stepper motor for your OSSM build.
|
||||
</p>
|
||||
|
||||
{/* Recommended Motor(s) */}
|
||||
{recommendedMotors.length > 0 && (
|
||||
<div className={`mb-8 ${hasSingleRecommended ? 'flex justify-center' : ''}`}>
|
||||
{hasSingleRecommended ? (
|
||||
<div className="w-full max-w-md">
|
||||
{renderMotorCard(recommendedMotors[0], true, true)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-700">Recommended Options</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{recommendedMotors.map((motor) => renderMotorCard(motor, true, false))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Other Motors - Smaller Grid */}
|
||||
{otherMotors.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-700">Other Options</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{otherMotors.map((motor) => renderMotorCard(motor, false, false))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user