From 76ee723c37578e79c030f63b1f0ee1f00b3c45dc Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 26 Jul 2025 11:53:34 +0200
Subject: [PATCH] refactor: use reusable PropertyItem component instead of
 local

---
 .../editor/properties-panel/index.tsx         | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 3f38bd78..720c4a26 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -16,6 +16,11 @@ import {
 } from "../../ui/select";
 import { AudioProperties } from "./audio-properties";
 import { MediaProperties } from "./media-properties";
+import {
+  PropertyItem,
+  PropertyItemLabel,
+  PropertyItemValue,
+} from "./property-item";
 import { TextProperties } from "./text-properties";
 
 export function PropertiesPanel() {
@@ -35,12 +40,30 @@ export function PropertiesPanel() {
     <div className="space-y-4 p-5">
       {/* Media Properties */}
       <div className="flex flex-col gap-3">
-        <PropertyItem label="Name:" value={activeProject?.name || ""} />
-        <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
-        <PropertyItem
-          label="Resolution:"
-          value={`${canvasSize.width} × ${canvasSize.height}`}
-        />
+        <PropertyItem direction="column">
+          <PropertyItemLabel className="text-xs text-muted-foreground">
+            Name:
+          </PropertyItemLabel>
+          <PropertyItemValue className="text-xs truncate">
+            {activeProject?.name || ""}
+          </PropertyItemValue>
+        </PropertyItem>
+        <PropertyItem direction="column">
+          <PropertyItemLabel className="text-xs text-muted-foreground">
+            Aspect ratio:
+          </PropertyItemLabel>
+          <PropertyItemValue className="text-xs truncate">
+            {getDisplayName()}
+          </PropertyItemValue>
+        </PropertyItem>
+        <PropertyItem direction="column">
+          <PropertyItemLabel className="text-xs text-muted-foreground">
+            Resolution:
+          </PropertyItemLabel>
+          <PropertyItemValue className="text-xs truncate">
+            {`${canvasSize.width} × ${canvasSize.height}`}
+          </PropertyItemValue>
+        </PropertyItem>
         <div className="flex flex-col gap-1">
           <Label className="text-xs text-muted-foreground">Frame rate:</Label>
           <Select
@@ -98,16 +121,3 @@ export function PropertiesPanel() {
     </ScrollArea>
   );
 }
-
-function PropertyItem({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="grid justify-between grid-cols-6">
-      <Label className="text-xs text-muted-foreground col-span-2">
-        {label}
-      </Label>
-      <span className="text-xs text-right col-span-4 truncate" title={value}>
-        {value}
-      </span>
-    </div>
-  );
-}