feat: basic audio view in media panel

2 files changed, 20 insertions, 3 deletions

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>

+  );

+}