External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use reusable PropertyItem component instead of local

Browse Source
This commit is contained in:
Maze Winther
2025-07-26 11:53:34 +02:00
parent ae94056952
commit 76ee723c37
1 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/properties-panel/index.tsx
+29 -19
View File
@@ -16,6 +16,11 @@ import {
} from "../../ui/select"; } from "../../ui/select";
import { AudioProperties } from "./audio-properties"; import { AudioProperties } from "./audio-properties";
import { MediaProperties } from "./media-properties"; import { MediaProperties } from "./media-properties";
import {
PropertyItem,
PropertyItemLabel,
PropertyItemValue,
} from "./property-item";
import { TextProperties } from "./text-properties"; import { TextProperties } from "./text-properties";
export function PropertiesPanel() { export function PropertiesPanel() {
@@ -35,12 +40,30 @@ export function PropertiesPanel() {
<div className="space-y-4 p-5"> <div className="space-y-4 p-5">
{/* Media Properties */} {/* Media Properties */}
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<PropertyItem label="Name:" value={activeProject?.name || ""} /> <PropertyItem direction="column">
<PropertyItem label="Aspect ratio:" value={getDisplayName()} /> <PropertyItemLabel className="text-xs text-muted-foreground">
<PropertyItem Name:
label="Resolution:" </PropertyItemLabel>
value={`${canvasSize.width} × ${canvasSize.height}`} <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"> <div className="flex flex-col gap-1">
<Label className="text-xs text-muted-foreground">Frame rate:</Label> <Label className="text-xs text-muted-foreground">Frame rate:</Label>
<Select <Select
@@ -98,16 +121,3 @@ export function PropertiesPanel() {
</ScrollArea> </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>
);
}