contiune text editing

src/components/font-family-picker.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import fonts from "../assets/fonts.json";
+import {
+  CaretSortIcon,
+  CheckIcon,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { useEffect } from "react";
+
+type PopoverTriggerProps = React.ComponentPropsWithoutRef<
+  typeof PopoverTrigger
+>;
+
+type Props = PopoverTriggerProps;
+
+export function FontFamilyPicker({}: Props) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedFont, setSelectedFont] = React.useState<string>("Roboto");
+
+  useEffect(() => {
+    fonts.items.map((font): void => {
+      const fontLink = font.files.regular;
+      const newFont = new FontFace(font.family, `url(${fontLink})`);
+      newFont
+        .load()
+        .then((loadedFont) => {
+          document.fonts.add(loadedFont);
+        })
+        .catch((e) => console.error(e));
+    });
+  }, []);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          aria-label="Select a team"
+          className={cn("w-[200px] justify-between")}
+        >
+          {selectedFont}
+          <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandList>
+            <CommandInput placeholder="Search team..." />
+            <CommandEmpty>No team found.</CommandEmpty>
+
+            {fonts.items.map((font) => (
+              <CommandItem
+                key={font.family}
+                onSelect={() => {
+                  setSelectedFont(font.family);
+                  setOpen(false);
+                }}
+                className="text-sm"
+                style={{ fontFamily: font.family }}
+              >
+                {font.family}
+                <CheckIcon
+                  className={cn(
+                    "ml-auto h-4 w-4",
+                    selectedFont === font.family ? "opacity-100" : "opacity-0",
+                  )}
+                />
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}