Color Input

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { ColorPicker } from "@/components/ui/color-picker";
5import { Input, type InputProps } from "@/components/ui/input";
6 
7interface ColorInputProps
8  extends Omit<InputProps, "value" | "onChange" | "startContent"> {
9  type?: "hex" | "hex-alpha";
10  value: string;
11  onChange: (value: string) => void;
12}
13 
14const ColorInput = ({
15  variant,
16  className,
17  value = "#4ec4b8",
18  type = "hex",
19  onChange,
20  ...props
21}: ColorInputProps) => {
22  return (
23    <Input
24      {...props}
25      variant={variant}
26      className={cn("p-2", className)}
27      value={value}
28      onChange={(e) => {
29        const value = e.target.value;
30        onChange(value);
31      }}
32      startContent={
33        <ColorPicker
34          type={type}
35          sideOffset={16}
36          alignOffset={variant === "underline" ? -4 : -12}
37          value={value}
38          onChange={(value) => {
39            onChange(value);
40          }}
41        />
42      }
43    />
44  );
45};
46 
47export { ColorInput, type ColorInputProps };