refactor: separate property item component

apps/web/src/components/editor/properties-panel/property-item.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+
+interface PropertyItemProps {
+  direction?: "row" | "column";
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function PropertyItem({
+  direction = "row",
+  children,
+  className,
+}: PropertyItemProps) {
+  return (
+    <div
+      className={cn(
+        "flex gap-2",
+        direction === "row"
+          ? "items-center justify-between gap-6"
+          : "flex-col gap-1",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function PropertyItemLabel({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <label className={cn("text-xs", className)}>{children}</label>;
+}
+
+export function PropertyItemValue({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("flex-1", className)}>{children}</div>;
+}

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

@@ -1,5 +1,4 @@
 import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -12,6 +11,11 @@ import { TextElement } from "@/types/timeline";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
+import {
+  PropertyItem,
+  PropertyItemLabel,
+  PropertyItemValue,
+} from "./property-item";
 
 export function TextProperties({
   element,
@@ -32,8 +36,9 @@ export function TextProperties({
           updateTextElement(trackId, element.id, { content: e.target.value })
         }
       />
-      <div className="flex items-center justify-between gap-6">
+      <PropertyItem direction="row">
-        <Label className="text-xs">Font</Label>
+        <PropertyItemLabel>Font</PropertyItemLabel>
+        <PropertyItemValue>
           <Select
             defaultValue={element.fontFamily}
             onValueChange={(value: FontFamily) =>
@@ -51,9 +56,11 @@ export function TextProperties({
               ))}
             </SelectContent>
           </Select>
-      </div>
+        </PropertyItemValue>
-      <div className="flex flex-col gap-1">
+      </PropertyItem>
-        <Label className="text-xs">Font size</Label>
+      <PropertyItem direction="column">
+        <PropertyItemLabel>Font size</PropertyItemLabel>
+        <PropertyItemValue>
           <div className="flex items-center gap-2">
             <Slider
               defaultValue={[element.fontSize]}
@@ -79,7 +86,8 @@ export function TextProperties({
                [&::-webkit-inner-spin-button]:appearance-none"
             />
           </div>
-      </div>
+        </PropertyItemValue>
+      </PropertyItem>
     </div>
   );
 }