color-picker-inline-demo

1"use client";
2 
3import * as React from "react";
4import {
5  ColorPicker,
6  ColorPickerAlphaSlider,
7  ColorPickerArea,
8  ColorPickerEyeDropper,
9  ColorPickerFormatSelect,
10  ColorPickerHueSlider,
11  ColorPickerInput,
12  ColorPickerSwatch,
13} from "@/registry/bases/base/ui/color-picker";
14 
15export default function ColorPickerInlineDemo() {
16  const [color, setColor] = React.useState("#f59e0b");
17 
18  return (
19    <ColorPicker
20      value={color}
21      onValueChange={setColor}
22      inline
23      defaultFormat="hex"
24    >
25      <div className="flex flex-col gap-4">
26        <div className="flex items-center gap-3">
27          <ColorPickerSwatch className="size-8" />
28          <span className="font-medium text-sm">Selected Color</span>
29        </div>
30        <div className="flex flex-col gap-4 rounded-lg border p-4">
31          <ColorPickerArea />
32          <div className="flex items-center gap-2">
33            <ColorPickerEyeDropper />
34            <div className="flex flex-1 flex-col gap-2">
35              <ColorPickerHueSlider />
36              <ColorPickerAlphaSlider />
37            </div>
38          </div>
39          <div className="flex items-center gap-2">
40            <ColorPickerFormatSelect />
41            <ColorPickerInput />
42          </div>
43        </div>
44      </div>
45    </ColorPicker>
46  );
47}