Color Field

1"use client";
2 
3import type { TextFieldClientProps } from "payload";
4import { useField } from "@payloadcms/ui";
5import Sketch from "@uiw/react-color-sketch";
6import {
7	Popover,
8	PopoverTrigger,
9	PopoverContent,
10} from "@/registry/default/ui/popover";
11import { Button } from "@/registry/default/ui/button";
12import { useState } from "react";
13import type { TextField } from "@/registry/default/lib/fields";
14 
15export default function ColorField({
16	field,
17	path,
18}: { field: { description?: string } & TextField } & TextFieldClientProps) {
19	const { value, setValue } = useField<string>({ path });
20	const [open, setOpen] = useState(false);
21	const current = typeof value === "string" && value ? value : "#000000";
22	return (
23		<div>
24			<div className="flex items-center justify-between gap-4">
25				<label>
26					<span style={{ color: value }}>
27						{(field?.label as string)?.toUpperCase()}
28					</span>
29					{field.required ? <span className="pl-1 text-red-500">*</span> : ""}
30					{field?.description ? (
31						<p className="text-muted-foreground mt-1 text-xs">
32							{field.description}
33						</p>
34					) : null}
35				</label>
36				<Popover open={open} onOpenChange={setOpen}>
37					<PopoverTrigger asChild className="mt-2 w-sm cursor-pointer">
38						<Button
39							variant="outline"
40							role="combobox"
41							aria-expanded={open}
42							className="justify-between"
43							style={{ background: value }}
44						>
45							{value}
46						</Button>
47					</PopoverTrigger>
48					<PopoverContent className="border-none">
49						<Sketch
50							color={current}
51							onChange={(color) => {
52								setValue(color.hex);
53							}}
54						/>
55					</PopoverContent>
56				</Popover>
57			</div>
58			<hr />
59		</div>
60	);
61}