Tom Boullay
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { DESTINATIONS } from '@/lib/constants'
|
|
import type { Destination } from '@/lib/constants'
|
|
|
|
interface DestinationPickerProps {
|
|
destination: Destination
|
|
disabled: boolean
|
|
onChange: (value: Destination) => void
|
|
}
|
|
|
|
export default function DestinationPicker({
|
|
destination,
|
|
disabled,
|
|
onChange,
|
|
}: DestinationPickerProps) {
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<label className="block text-sm font-medium text-gray-300">Destination</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{DESTINATIONS.map((dest) => (
|
|
<button
|
|
key={dest.value}
|
|
type="button"
|
|
onClick={() => onChange(dest.value)}
|
|
disabled={disabled}
|
|
className={`px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 border
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
${destination === dest.value
|
|
? 'bg-white text-[#000000] border-white'
|
|
: 'bg-black-800 text-gray-400 border-white/20 hover:border-white/40 hover:text-gray-200'
|
|
}`}
|
|
>
|
|
{dest.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|