Get a quote UI inputs

<div className="flex items-center space-x-2">
    <label htmlFor="airplane-mode" className="text-sm">
        Airplane Mode
    </label>
    <Switch.Root
        // checked={checked}
        // onCheckedChange={onChange}
        className="w-11 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-blue-500"
        id="airplane-mode"
    >
        <Switch.Thumb className="block w-5 h-5 bg-white rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[22px]" />
    </Switch.Root>
</div>

<div className="p-4">
    <Slider.Root
        className="relative flex items-center w-48 h-5"
        value={sliderValue}
        onValueChange={setSliderValue}
        max={100}
        step={1}
    >
        <Slider.Track className="bg-gray-300 relative flex-1 h-1 rounded">
            <Slider.Range className="absolute h-1 bg-blue-500 rounded" />
        </Slider.Track>
        <Slider.Thumb className="block w-4 h-4 bg-white border rounded-full shadow" />
    </Slider.Root>

    <div className="mt-2 text-sm text-gray-600">
        Value: {sliderValue[0]}
    </div>
</div>

<Popover.Root>
    <Popover.Trigger
        className="w-8 h-8 rounded border"
        style={{ backgroundColor: color }}
    />
    <Popover.Content className="p-2 bg-white border rounded shadow">
        <HexColorPicker color={color} onChange={setColor} />
    </Popover.Content>
</Popover.Root>