xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: new font picker component

Browse Source
This commit is contained in:
Maze Winther
2025-07-10 21:52:46 +02:00
parent f984f615ce
commit 7ec9167aeb
2 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web/src/components/editor/properties-panel/text-properties.tsx
View File

@ -1,12 +1,6 @@
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { import { FontPicker } from "@/components/ui/font-picker";
Select, import { FontFamily } from "@/constants/font-constants";
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
import { TextElement } from "@/types/timeline"; import { TextElement } from "@/types/timeline";
import { useTimelineStore } from "@/stores/timeline-store"; import { useTimelineStore } from "@/stores/timeline-store";
import { Slider } from "@/components/ui/slider"; import { Slider } from "@/components/ui/slider";
@ -39,23 +33,12 @@ export function TextProperties({
<PropertyItem direction="row"> <PropertyItem direction="row">
<PropertyItemLabel>Font</PropertyItemLabel> <PropertyItemLabel>Font</PropertyItemLabel>
<PropertyItemValue> <PropertyItemValue>
<Select <FontPicker
defaultValue={element.fontFamily} defaultValue={element.fontFamily}
onValueChange={(value: FontFamily) => onValueChange={(value: FontFamily) =>
updateTextElement(trackId, element.id, { fontFamily: value }) 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> </PropertyItemValue>
</PropertyItem> </PropertyItem>
<PropertyItem direction="column"> <PropertyItem direction="column">

35
apps/web/src/components/ui/font-picker.tsx Normal file
View File

@ -0,0 +1,35 @@
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
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={`w-full text-xs ${className || ""}`}>
<SelectValue placeholder="Select a font" />
</SelectTrigger>
<SelectContent>
{FONT_OPTIONS.map((font) => (
<SelectItem key={font.value} value={font.value}>
{font.label}
</SelectItem>
))}
</SelectContent>
</Select>
);
}