apps/web/src/app/page.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "../components/ui/resizable";
import { MediaPanel } from "../components/media-panel";
import { PropertiesPanel } from "../components/properties-panel";
import { Timeline } from "../components/timeline";
import { PreviewPanel } from "../components/preview-panel";

export default function VideoEditor() {
  return (
    <div className="h-screen w-screen flex flex-col bg-background">
      <ResizablePanelGroup direction="vertical">
        <ResizablePanel defaultSize={50} minSize={30}>
          {/* Main content area */}
          <ResizablePanelGroup direction="horizontal">
            {/* Tools Panel */}
            <ResizablePanel defaultSize={20} minSize={15}>
              <MediaPanel />
            </ResizablePanel>

            <ResizableHandle withHandle />

            {/* Preview Area */}
            <ResizablePanel defaultSize={60}>
              <PreviewPanel />
            </ResizablePanel>

            <ResizableHandle withHandle />

            {/* Properties Panel */}
            <ResizablePanel defaultSize={20} minSize={15}>
              <PropertiesPanel />
            </ResizablePanel>
          </ResizablePanelGroup>
        </ResizablePanel>

        <ResizableHandle withHandle />

        {/* Timeline */}
        <ResizablePanel defaultSize={50} minSize={15}>
          <Timeline />
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}