diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-06-22 10:02:50 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-06-22 10:02:50 +0200 |
| commit | 87a83a5604b20550430ef4eefbcd573d309694e2 (patch) | |
| tree | 7ed86f00b8414cb6543f5c5ac98ea6e9abd2e10f /apps/web/src/components/properties-panel.tsx | |
| download | opencut-87a83a5604b20550430ef4eefbcd573d309694e2.tar.gz | |
Initial commit
Diffstat (limited to 'apps/web/src/components/properties-panel.tsx')
| -rw-r--r-- | apps/web/src/components/properties-panel.tsx | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/apps/web/src/components/properties-panel.tsx b/apps/web/src/components/properties-panel.tsx new file mode 100644 index 00000000..612e2ef0 --- /dev/null +++ b/apps/web/src/components/properties-panel.tsx @@ -0,0 +1,100 @@ +"use client";
+
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Slider } from "./ui/slider";
+import { ScrollArea } from "./ui/scroll-area";
+import { Separator } from "./ui/separator";
+
+export function PropertiesPanel() {
+ return (
+ <ScrollArea className="h-full">
+ <div className="space-y-6 p-5">
+ {/* Transform */}
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Transform</h3>
+ <div className="space-y-2">
+ <div className="grid grid-cols-2 gap-2">
+ <div className="space-y-1">
+ <Label htmlFor="x">X Position</Label>
+ <Input id="x" type="number" defaultValue="0" />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="y">Y Position</Label>
+ <Input id="y" type="number" defaultValue="0" />
+ </div>
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="rotation">Rotation</Label>
+ <Slider
+ id="rotation"
+ max={360}
+ step={1}
+ defaultValue={[0]}
+ className="mt-2"
+ />
+ </div>
+ </div>
+ </div>
+
+ <Separator />
+
+ {/* Effects */}
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Effects</h3>
+ <div className="space-y-4">
+ <div className="space-y-1">
+ <Label htmlFor="opacity">Opacity</Label>
+ <Slider
+ id="opacity"
+ max={100}
+ step={1}
+ defaultValue={[100]}
+ className="mt-2"
+ />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="blur">Blur</Label>
+ <Slider
+ id="blur"
+ max={20}
+ step={0.5}
+ defaultValue={[0]}
+ className="mt-2"
+ />
+ </div>
+ </div>
+ </div>
+
+ <Separator />
+
+ {/* Timing */}
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Timing</h3>
+ <div className="space-y-2">
+ <div className="space-y-1">
+ <Label htmlFor="duration">Duration (seconds)</Label>
+ <Input
+ id="duration"
+ type="number"
+ min="0"
+ step="0.1"
+ defaultValue="5"
+ />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="delay">Delay (seconds)</Label>
+ <Input
+ id="delay"
+ type="number"
+ min="0"
+ step="0.1"
+ defaultValue="0"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </ScrollArea>
+ );
+}
|