Blogs listing + Categories

frontend/components/ui/combobox.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { useState } from "react";
+
+interface ComboBoxProps<T> {
+	elements: T[];
+	trigger: (value?: string) => React.ReactNode;
+	onSubmit?: (value: string) => void;
+	value: string;
+	setValue: React.Dispatch<React.SetStateAction<string>>;
+	children: (
+		ItemComponent: (
+			props: React.ComponentProps<typeof CommandItem> & { label: string },
+		) => React.JSX.Element,
+		element: T,
+	) => React.ReactNode;
+}
+
+const ComboBox = <T,>({
+	elements,
+	trigger,
+	children,
+	onSubmit,
+	value,
+	setValue,
+}: ComboBoxProps<T>) => {
+	const [open, setOpen] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+
+	const handleSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key !== "Enter") return;
+		e.preventDefault();
+		setValue(searchValue);
+		onSubmit?.(searchValue);
+	};
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				{trigger(value.length > 0 ? value : undefined)}
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0">
+				<Command>
+					<CommandInput
+						onKeyDown={handleSubmit}
+						onInput={(e) =>
+							setSearchValue((e.target as HTMLInputElement).value)
+						}
+						placeholder="Search framework..."
+					/>
+					<CommandList>
+						<CommandEmpty>
+							Créer une nouvelle catégorie
+						</CommandEmpty>
+						<CommandGroup>
+							{elements.map((element, index) =>
+								children(
+									({
+										value: elementValue,
+										label,
+										onSelect,
+										...props
+									}) => (
+										<CommandItem
+											key={index}
+											value={elementValue ?? ""}
+											onSelect={(_value) => {
+												setValue(_value);
+												console.log(elementValue);
+												setOpen(false);
+												onSelect?.(_value);
+											}}
+											{...props}
+										>
+											{label}
+											<Check
+												className={cn(
+													"mr-2 h-4 w-4",
+													value === elementValue
+														? "opacity-100"
+														: "opacity-0",
+												)}
+											/>
+										</CommandItem>
+									),
+									element,
+								),
+							)}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+};
+
+export default ComboBox;