Todd/gate-quote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login

Browse Source
This commit is contained in:
Todd
2026-05-24 13:30:30 -04:00
parent 753bc04141
commit f29035ce81
26 changed files with 1092 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
client/src/components/StepGroundLoops.jsx
View File

@ -1,14 +1,17 @@
export default function StepGroundLoops({
detectors,
styles,
sizes,
types,
value,
onSetNeeded,
onSetStyle,
onToggleType,
onSetSize,
onNext,
onBack,
}) {
const { needed, style, types: selectedTypes } = value;
const { needed, style, types: selectedTypes, typeSizes } = value;
return (
<div>
@ -118,43 +121,95 @@ export default function StepGroundLoops({
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{types.map((t) => {
const isSelected = selectedTypes.includes(t.id);
const currentSize = typeSizes[t.id];
return (
<button
<div
key={t.id}
onClick={() => onToggleType(t.id)}
className={`text-left p-4 rounded-xl border-2 transition-all ${
className={`rounded-xl border-2 transition-all ${
isSelected
? 'border-blue-600 bg-blue-50 shadow-md'
? 'border-blue-600 bg-blue-50'
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
}`}
>
<div className="flex items-start justify-between">
<div className="min-w-0">
<div className="font-semibold text-gray-900">
{t.name}
<button
onClick={() => onToggleType(t.id)}
className={`text-left w-full p-4 ${isSelected ? 'pb-3' : ''}`}
>
<div className="flex items-start justify-between">
<div className="min-w-0">
<div className="font-semibold text-gray-900">
{t.name}
</div>
<div className="text-sm text-gray-500 mt-1">
{t.description}
</div>
<div className="mt-2 text-lg font-bold text-blue-600">
C${t.price.toLocaleString('en-CA')}
</div>
</div>
<div className="text-sm text-gray-500 mt-1">
{t.description}
</div>
<div className="mt-2 text-lg font-bold text-blue-600">
C${t.price.toLocaleString('en-CA')}
<div
className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
isSelected
? 'border-blue-600 bg-blue-600'
: 'border-gray-300'
}`}
>
{isSelected && (
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
)}
</div>
</div>
<div
className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
isSelected
? 'border-blue-600 bg-blue-600'
: 'border-gray-300'
}`}
>
{isSelected && (
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</button>
{isSelected && (
<div className="px-4 pb-4 border-t border-blue-200 pt-3 mt-0 space-y-3">
<div className="flex items-center gap-2 text-xs text-blue-700 bg-blue-100 rounded-md px-3 py-2">
<svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
)}
<span>Includes 1 Loop Detector (+C${(detectors?.[0]?.price ?? 250).toLocaleString('en-CA')})</span>
</div>
<div>
<label className="block text-xs font-medium text-gray-500 mb-2">
Loop Size
</label>
<div className="flex gap-2">
{sizes.map((s) => {
const isSizeSelected = currentSize === s.id;
return (
<button
key={s.id}
onClick={(e) => {
e.stopPropagation();
onSetSize(t.id, s.id);
}}
className={`flex-1 px-3 py-2 text-sm rounded-lg border-2 transition-all ${
isSizeSelected
? 'border-blue-600 bg-white shadow-sm'
: 'border-gray-200 bg-white hover:border-gray-300'
}`}
>
<div className={`font-medium ${isSizeSelected ? 'text-blue-700' : 'text-gray-700'}`}>
{s.name}
</div>
{s.additionalCost > 0 && (
<div className={`text-xs mt-0.5 ${isSizeSelected ? 'text-blue-500' : 'text-gray-400'}`}>
+C${s.additionalCost.toLocaleString('en-CA')}
</div>
)}
{s.additionalCost === 0 && (
<div className="text-xs mt-0.5 text-gray-400">Standard</div>
)}
</button>
);
})}
</div>
</div>
</div>
</div>
</button>
)}
</div>
);
})}
</div>