color-picker

1"use client";
2
3import { Button } from "@/components/website/ui/button";
4import { Input } from "@/components/website/ui/input";
5import { Label } from "@/components/website/ui/label";
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/website/ui/popover";
11import { cn } from "@/lib/utils";
12import { Copy, Pipette } from "lucide-react";
13import { HexColorPicker } from "react-colorful";
14import { toast } from "sonner";
15
16interface ColorPickerProps {
17  color: string
18  onChange: (color: string) => void
19  label: string
20  isEyeDroppper?:boolean
21  className?:string
22}
23
24export function ColorPicker({
25  color,
26  onChange,
27  label,
28  isEyeDroppper = false,
29  className,
30}: ColorPickerProps) {
31  function copyToClipboard() {
32    navigator.clipboard.writeText(color);
33    toast("Copied!", {
34      description: `${color} copied to clipboard`,
35      duration: 2000,
36    });
37  }
38
39  async function useEyeDropper() {
40    if (!("EyeDropper" in window)) {
41      toast.error("Not supported", {
42        description: "Eyedropper is not supported in your browser",
43        duration: 3000,
44      });
45      return;
46    }
47
48    try {
49      // @ts-expect-error - EyeDropper is not in the TypeScript DOM types yet
50      const eyeDropper = new window.EyeDropper();
51      const result = await eyeDropper.open();
52      onChange(result.sRGBHex);
53    } catch (e) {
54      console.error("Error using eyedropper", e);
55    }
56  }
57
58  return (
59    <div className={cn("flex items-center gap-2",className)}>
60      <Label className="w-24">{label}</Label>
61      <Popover>
62        <PopoverTrigger asChild>
63          <Button
64            variant="outline"
65            className="h-8 w-12 border-2 p-0"
66            style={{ backgroundColor: color }}
67          >
68            <span className="sr-only">Pick a color</span>
69          </Button>
70        </PopoverTrigger>
71        <PopoverContent className="w-full p-3 bg-primary-foreground">
72          <HexColorPicker
73            color={color}
74            onChange={onChange}
75            className="w-full!"
76          />
77          <div className="mt-2 flex w-full gap-2">
78            <Input
79              value={color}
80              onChange={(e) => onChange(e.target.value)}
81              className="h-10 w-full"
82            />
83            <Button
84              variant="outline"
85              size="icon"
86              onClick={copyToClipboard}
87// … truncated