refactor: create base view for media panel tabs

5 files changed, 89 insertions, 29 deletions

diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 70eb69dd..21df9924 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -7,6 +7,7 @@ import { TextView } from "./views/text";
 import { SoundsView } from "./views/sounds";
 import { Separator } from "@/components/ui/separator";
 import { SettingsView } from "./views/settings";
+import { Captions } from "./views/captions";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
@@ -30,11 +31,7 @@ export function MediaPanel() {
         Transitions view coming soon...
       </div>
     ),
-    captions: (
-      <div className="p-4 text-muted-foreground">
-        Captions view coming soon...
-      </div>
-    ),
+    captions: <Captions />,
     filters: (
       <div className="p-4 text-muted-foreground">
         Filters view coming soon...
diff --git a/apps/web/src/components/editor/media-panel/views/base-view.tsx b/apps/web/src/components/editor/media-panel/views/base-view.tsx
new file mode 100644
index 00000000..41e9a2b6
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/base-view.tsx
@@ -0,0 +1,59 @@
+import { ScrollArea } from "@/components/ui/scroll-area";

+import { Separator } from "@/components/ui/separator";

+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

+

+interface BaseViewProps {

+  children: React.ReactNode;

+  defaultTab?: string;

+  tabs?: {

+    value: string;

+    label: string;

+    content: React.ReactNode;

+  }[];

+  className?: string;

+}

+

+function ViewContent({ children }: { children: React.ReactNode }) {

+  return (

+    <ScrollArea className="flex-1">

+      <div className="p-5">{children}</div>

+    </ScrollArea>

+  );

+}

+

+export function BaseView({

+  children,

+  defaultTab,

+  tabs,

+  className = "",

+}: BaseViewProps) {

+  return (

+    <div className={`h-full flex flex-col ${className}`}>

+      {!tabs || tabs.length === 0 ? (

+        <ViewContent>{children}</ViewContent>

+      ) : (

+        <Tabs defaultValue={defaultTab} className="flex flex-col h-full">

+          <div className="px-3 pt-4 pb-0">

+            <TabsList>

+              {tabs.map((tab) => (

+                <TabsTrigger key={tab.value} value={tab.value}>

+                  {tab.label}

+                </TabsTrigger>

+              ))}

+            </TabsList>

+          </div>

+          <Separator className="mt-4" />

+          {tabs.map((tab) => (

+            <TabsContent

+              key={tab.value}

+              value={tab.value}

+              className="mt-0 flex-1 flex flex-col min-h-0"

+            >

+              <ViewContent>{tab.content}</ViewContent>

+            </TabsContent>

+          ))}

+        </Tabs>

+      )}

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx
new file mode 100644
index 00000000..ef919fec
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/captions.tsx
@@ -0,0 +1,9 @@
+import { BaseView } from "./base-view";

+

+export function Captions() {

+  return (

+    <BaseView>

+      <div>Captions</div>

+    </BaseView>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index b6b79b59..419cd1ee 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -7,9 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { BaseView } from "./base-view";
 import {
   PropertyItem,
   PropertyItemLabel,
@@ -34,25 +32,21 @@ export function SettingsView() {
 
 function ProjectSettingsTabs() {
   return (
-    <div className="h-full flex flex-col">
-      <Tabs defaultValue="project-info" className="flex flex-col h-full">
-        <div className="px-3 pt-4 pb-0">
-          <TabsList>
-            <TabsTrigger value="project-info">Project info</TabsTrigger>
-            <TabsTrigger value="background">Background</TabsTrigger>
-          </TabsList>
-        </div>
-        <Separator className="my-4" />
-        <ScrollArea className="flex-1">
-          <TabsContent value="project-info" className="p-5 pt-0 mt-0">
-            <ProjectInfoView />
-          </TabsContent>
-          <TabsContent value="background" className="p-4 pt-0">
-            <BackgroundView />
-          </TabsContent>
-        </ScrollArea>
-      </Tabs>
-    </div>
+    <BaseView
+      defaultTab="project-info"
+      tabs={[
+        {
+          value: "project-info",
+          label: "Project info",
+          content: <ProjectInfoView />,
+        },
+        {
+          value: "background",
+          label: "Background",
+          content: <BackgroundView />,
+        },
+      ]}
+    />
   );
 }
 
diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index ca8e88c9..49eacbc7 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/apps/web/src/components/editor/media-panel/views/text.tsx
@@ -1,4 +1,5 @@
 import { DraggableMediaItem } from "@/components/ui/draggable-item";
+import { BaseView } from "./base-view";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { type TextElement } from "@/types/timeline";
@@ -28,7 +29,7 @@ const textData: TextElement = {
 
 export function TextView() {
   return (
-    <div className="p-4">
+    <BaseView>
       <DraggableMediaItem
         name="Default text"
         preview={
@@ -48,6 +49,6 @@ export function TextView() {
         }
         showLabel={false}
       />
-    </div>
+    </BaseView>
   );
 }