Social Links Field

1"use client";
2 
3import {
4	socialIcons,
5	type SocialIconKey,
6} from "@/registry/default/ui/icons/social-icons";
7import { Check, ChevronsUpDown } from "lucide-react";
8import type { OptionObject, SelectFieldClientProps } from "payload";
9import { useField } from "@payloadcms/ui";
10import {
11	Command,
12	CommandEmpty,
13	CommandGroup,
14	CommandInput,
15	CommandItem,
16	CommandList,
17} from "@/registry/default/ui/command";
18import SocialIcon from "@/registry/default/ui/icons/social-icon";
19 
20import {
21	Popover,
22	PopoverContent,
23	PopoverTrigger,
24} from "@/registry/default/ui/popover";
25import { cn } from "@/registry/default/utils";
26import { useState, type Dispatch, type SetStateAction } from "react";
27import { Button } from "@/registry/default/ui/button";
28 
29function SocialIconKey({
30	icon,
31	index,
32	value,
33	setValue,
34	setOpen,
35}: {
36	icon: OptionObject;
37	index: number;
38	value: SocialIconKey;
39	setValue: (val: unknown, disableModifyingForm?: boolean) => void;
40	setOpen: Dispatch<SetStateAction<boolean>>;
41}) {
42	return (
43		<CommandItem
44			value={icon.value}
45			onSelect={(currentValue) => {
46				setValue(currentValue === value ? "" : currentValue);
47				setOpen(false);
48			}}
49			key={`${index}-${icon.value}`}
50			className="cursor-pointer transition-colors duration-400 hover:bg-neutral-300"
51		>
52			<SocialIcon icon={icon.value as SocialIconKey} />
53			{icon.value}
54			<Check
55				className={cn(
56					"ml-auto opacity-0",
57					value === icon.label && "opacity-100",
58				)}
59			/>
60		</CommandItem>
61	);
62}
63 
64export default function SocialIconField({
65	field,
66	path,
67}: SelectFieldClientProps) {
68	const { value, setValue } = useField<SocialIconKey>({ path });
69	const [open, setOpen] = useState(false);
70	const selectIcon = socialIcons[value];
71 
72	return (
73		<div className="">
74			<label>
75				{field.label as string}
76				{field.required ? <span className="pl-1 text-red-500">*</span> : ""}
77			</label>
78			<Popover open={open} onOpenChange={setOpen}>
79				<PopoverTrigger asChild className="mt-2 w-full cursor-pointer">
80					<Button
81						variant="outline"
82						role="combobox"
83						aria-expanded={open}
84						className="justify-between"
85					>
86						{selectIcon && <SocialIcon icon={value} />}
87						{value ? value : "Find Social Link..."}
88						<ChevronsUpDown className="opacity-50" />
89					</Button>
90				</PopoverTrigger>
91				<PopoverContent className="w-[var(--radix-popover-trigger-width)] bg-neutral-200 dark:bg-neutral-600">
92					<Command value={value}>
93						<CommandInput
94							placeholder="Search Icons..."
95// … truncated