Color Picker Demo

1import { Label } from "@/components/ui/label";
2import { ColorPicker } from "@/components/ui/color-picker";
3import { useState } from "react";
4 
5export const ColorPickerDemo = () => {
6  const [hex, setHex] = useState("#4ec4b8");
7  const [hexAlpha, setHexAlpha] = useState("#4ec4b880");
8 
9  return (
10    <div className="flex flex-col gap-4 w-full max-w-32">
11      <div className="flex gap-1.5 items-center">
12        <ColorPicker value={hex} onChange={(value) => setHex(value)} />
13        <div className="flex flex-col gap-0.5">
14          <Label>Hex</Label>
15          <span className="text-sm text-muted-foreground">{hex}</span>
16        </div>
17      </div>
18      <div className="flex gap-1.5 items-center">
19        <ColorPicker
20          type="hex-alpha"
21          value={hexAlpha}
22          onChange={(value) => setHexAlpha(value)}
23        />
24        <div className="flex flex-col gap-0.5">
25          <Label>Hex Alpha</Label>
26          <span className="text-sm text-muted-foreground">{hexAlpha}</span>
27        </div>
28      </div>
29    </div>
30  );
31};