login
This commit is contained in:
Todd
@ -1,7 +1,12 @@
|
||||
export default function StepAccessControl({
|
||||
accessControl,
|
||||
remoteButtonOptions,
|
||||
selected,
|
||||
remoteButtons,
|
||||
remoteQuantity,
|
||||
onToggle,
|
||||
onSetRemoteButtons,
|
||||
onSetRemoteQuantity,
|
||||
onBack,
|
||||
onNext,
|
||||
}) {
|
||||
@ -29,44 +34,129 @@ export default function StepAccessControl({
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{accessControl.map((ac) => {
|
||||
const isSelected = selected.includes(ac.id);
|
||||
const isRemote = ac.id === 'remote-kit';
|
||||
|
||||
return (
|
||||
<button
|
||||
<div
|
||||
key={ac.id}
|
||||
onClick={() => onToggle(ac.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">{ac.name}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Model: {ac.model}
|
||||
<button
|
||||
onClick={() => onToggle(ac.id)}
|
||||
className={`text-left w-full p-4 ${isSelected && isRemote ? 'pb-3' : ''}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold text-gray-900">{ac.name}</div>
|
||||
{ac.model && (
|
||||
<div className="text-sm text-gray-500">
|
||||
Model: {ac.model}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{ac.description}
|
||||
</div>
|
||||
<div className="mt-2 text-lg font-bold text-blue-600">
|
||||
{isRemote ? (
|
||||
'Varies by buttons'
|
||||
) : (
|
||||
'C$' + ac.price.toLocaleString('en-CA')
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{ac.description}
|
||||
</div>
|
||||
<div className="mt-2 text-lg font-bold text-blue-600">
|
||||
C${ac.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" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isSelected && isRemote && (
|
||||
<div className="px-4 pt-3 pb-4 border-t border-blue-200 mt-0 space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-2">
|
||||
Number of Buttons
|
||||
</label>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{remoteButtonOptions.map((opt) => {
|
||||
const isBtnSelected = remoteButtons === Number(opt.id);
|
||||
return (
|
||||
<button
|
||||
key={opt.id}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSetRemoteButtons(Number(opt.id));
|
||||
}}
|
||||
className={`px-3 py-2 text-sm rounded-lg border-2 transition-all text-center ${
|
||||
isBtnSelected
|
||||
? 'border-blue-600 bg-white shadow-sm'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className={`font-medium ${isBtnSelected ? 'text-blue-700' : 'text-gray-700'}`}>
|
||||
{opt.id}-Button
|
||||
</div>
|
||||
<div className={`text-xs mt-0.5 ${isBtnSelected ? 'text-blue-500' : 'text-gray-400'}`}>
|
||||
C${opt.price.toLocaleString('en-CA')}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-2">
|
||||
Quantity
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSetRemoteQuantity(remoteQuantity - 1);
|
||||
}}
|
||||
disabled={remoteQuantity <= 1}
|
||||
className={`w-9 h-9 rounded-lg border-2 flex items-center justify-center text-lg font-medium transition-all ${
|
||||
remoteQuantity <= 1
|
||||
? 'border-gray-200 text-gray-300 cursor-not-allowed'
|
||||
: 'border-gray-300 text-gray-600 hover:border-gray-400 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<div className="w-14 h-9 rounded-lg border-2 border-gray-300 flex items-center justify-center text-sm font-semibold text-gray-900 bg-white">
|
||||
{remoteQuantity}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSetRemoteQuantity(remoteQuantity + 1);
|
||||
}}
|
||||
className="w-9 h-9 rounded-lg border-2 border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:border-gray-400 hover:bg-gray-50 transition-all"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<span className="text-xs text-gray-400 ml-1">
|
||||
{remoteQuantity > 1 ? 'remotes' : 'remote'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user