apps/web/src/components/ui/font-picker.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants";
import { cn } from "@/utils/ui";

interface FontPickerProps {
	defaultValue?: FontFamily;
	onValueChange?: (value: FontFamily) => void;
	className?: string;
}

export function FontPicker({
	defaultValue,
	onValueChange,
	className,
}: FontPickerProps) {
	return (
		<Select defaultValue={defaultValue} onValueChange={onValueChange}>
			<SelectTrigger
				className={cn("w-full", className)}
			>
				<SelectValue placeholder="Select a font" />
			</SelectTrigger>
			<SelectContent>
				{FONT_OPTIONS.map((font) => (
					<SelectItem
						key={font.value}
						value={font.value}
						style={{ fontFamily: font.value }}
					>
						{font.label}
					</SelectItem>
				))}
			</SelectContent>
		</Select>
	);
}