color-picker-controlled-demo

1"use client";
2 
3import * as React from "react";
4import { Button } from "@/registry/bases/base/ui/button";
5import {
6  ColorPicker,
7  ColorPickerAlphaSlider,
8  ColorPickerArea,
9  ColorPickerContent,
10  ColorPickerEyeDropper,
11  ColorPickerFormatSelect,
12  ColorPickerHueSlider,
13  ColorPickerInput,
14  ColorPickerSwatch,
15  ColorPickerTrigger,
16} from "@/registry/bases/base/ui/color-picker";
17 
18const presetColors = [
19  "#ef4444", // red
20  "#f97316", // orange
21  "#eab308", // yellow
22  "#22c55e", // green
23  "#3b82f6", // blue
24  "#8b5cf6", // violet
25  "#ec4899", // pink
26  "#64748b", // gray
27];
28 
29export default function ColorPickerControlledDemo() {
30  const [color, setColor] = React.useState("#3b82f6");
31  const [isOpen, setIsOpen] = React.useState(false);
32 
33  const onReset = React.useCallback(() => {
34    setColor("#000000");
35    setIsOpen(false);
36  }, []);
37 
38  const onPresetSelect = React.useCallback((presetColor: string) => {
39    setColor(presetColor);
40  }, []);
41 
42  return (
43    <div className="flex flex-col gap-4">
44      <div className="flex items-center gap-3">
45        <ColorPicker
46          value={color}
47          onValueChange={setColor}
48          open={isOpen}
49          onOpenChange={setIsOpen}
50          defaultFormat="hex"
51        >
52          <ColorPickerTrigger
53            render={
54              <Button variant="outline" className="flex items-center gap-2">
55                <ColorPickerSwatch className="size-4" />
56                Pick Color
57              </Button>
58            }
59          />
60          <ColorPickerContent>
61            <ColorPickerArea />
62            <div className="flex items-center gap-2">
63              <ColorPickerEyeDropper />
64              <div className="flex flex-1 flex-col gap-2">
65                <ColorPickerHueSlider />
66                <ColorPickerAlphaSlider />
67              </div>
68            </div>
69            <div className="flex items-center gap-2">
70              <ColorPickerFormatSelect />
71              <ColorPickerInput />
72            </div>
73          </ColorPickerContent>
74        </ColorPicker>
75 
76        <Button variant="outline" onClick={onReset}>
77          Reset
78        </Button>
79      </div>
80 
81      <div className="flex flex-col gap-2">
82        <h4 className="font-medium text-sm">Preset Colors</h4>
83        <div className="flex flex-wrap gap-2">
84          {presetColors.map((presetColor) => (
85            <button
86              key={presetColor}
87              type="button"
88// … truncated