refactor: new font picker component

1 files changed, 4 insertions, 21 deletions

diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 120ca954..37b8d748 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -1,12 +1,6 @@
 import { Textarea } from "@/components/ui/textarea";

-import {

-  Select,

-  SelectContent,

-  SelectItem,

-  SelectTrigger,

-  SelectValue,

-} from "@/components/ui/select";

-import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";

+import { FontPicker } from "@/components/ui/font-picker";

+import { FontFamily } from "@/constants/font-constants";

 import { TextElement } from "@/types/timeline";

 import { useTimelineStore } from "@/stores/timeline-store";

 import { Slider } from "@/components/ui/slider";

@@ -39,23 +33,12 @@ export function TextProperties({
       <PropertyItem direction="row">

         <PropertyItemLabel>Font</PropertyItemLabel>

         <PropertyItemValue>

-          <Select

+          <FontPicker

             defaultValue={element.fontFamily}

             onValueChange={(value: FontFamily) =>

               updateTextElement(trackId, element.id, { fontFamily: value })

             }

-          >

-            <SelectTrigger className="w-full text-xs">

-              <SelectValue placeholder="Select a font" />

-            </SelectTrigger>

-            <SelectContent>

-              {FONT_OPTIONS.map((font) => (

-                <SelectItem key={font.value} value={font.value}>

-                  {font.label}

-                </SelectItem>

-              ))}

-            </SelectContent>

-          </Select>

+          />

         </PropertyItemValue>

       </PropertyItem>

       <PropertyItem direction="column">