From 4c2d8c52ab43837547e840ea4ed13b2c5d68d7e4 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 21 Jul 2025 11:52:48 +0200
Subject: [PATCH] feat: basic audio view in media panel

---
 .../components/editor/media-panel/index.tsx    |  5 ++---
 .../editor/media-panel/views/audio.tsx         | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/editor/media-panel/views/audio.tsx

diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 9f7322c7..90ac84f0 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -4,15 +4,14 @@ import { TabBar } from "./tabbar";
 import { MediaView } from "./views/media";
 import { useMediaPanelStore, Tab } from "./store";
 import { TextView } from "./views/text";
+import { AudioView } from "./views/audio";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
 
   const viewMap: Record<Tab, React.ReactNode> = {
     media: <MediaView />,
-    audio: (
-      <div className="p-4 text-muted-foreground">Audio view coming soon...</div>
-    ),
+    audio: <AudioView />,
     text: <TextView />,
     stickers: (
       <div className="p-4 text-muted-foreground">
diff --git a/apps/web/src/components/editor/media-panel/views/audio.tsx b/apps/web/src/components/editor/media-panel/views/audio.tsx
new file mode 100644
index 00000000..7ddf465c
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/audio.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+
+export function AudioView() {
+  const [search, setSearch] = useState("");
+  return (
+    <div className="h-full flex flex-col gap-2 p-4">
+      <Input
+        placeholder="Search songs and artists"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      <div className="flex flex-col gap-2"></div>
+    </div>
+  );
+}