From efbbc48bc5d20b8df3c1fe5feab3f6471263da4e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 5 Aug 2025 08:46:17 +0200
Subject: refactor: create base view for media panel tabs

---
 .../editor/media-panel/views/base-view.tsx         | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 apps/web/src/components/editor/media-panel/views/base-view.tsx

(limited to 'apps/web/src/components/editor/media-panel/views/base-view.tsx')

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>
+  );
+}
-- 
cgit v1.3.1