Channels & basic structure

src/app/server/[id]/page.tsx

@@ -0,0 +1,21 @@
+import AppSidebar from "@/components/Sidebar";
+import { Button } from "@/components/ui/button";
+
+export default async function Server(params: {params: Promise<{ id: string }>}) {
+  const { id } = await params.params;
+
+  return (
+    <AppSidebar server={{
+      id: 'bro',
+      name: 'Bro',
+      channels: [
+        { id: '1', name: 'general', kind: 'text' },
+        { id: '2', name: 'random', kind: 'text' },
+        { id: '3', name: 'help', kind: 'text' },
+        { id: '4', name: 'voice-chat', kind: 'voice' },
+      ]
+    }}>
+      <Button>Hello {id}</Button>
+    </AppSidebar>
+  );
+}

src/components/Sidebar.tsx

@@ -3,27 +3,29 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
 } from "./ui/sidebar";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, HashIcon, MicIcon, SpeakerIcon } from "lucide-react";
 import {
   DropdownMenuItem,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
+import Server from "@/types/Server";
 
 export default function AppSidebar({
+  server,
   children,
 }: Readonly<{
+  server?: Server;
   children: React.ReactNode;
 }>) {
   return (
-    <SidebarProvider defaultOpen>
+    server ? <SidebarProvider defaultOpen>
       <Sidebar>
         <SidebarHeader>
           <SidebarMenu>
@@ -48,8 +50,17 @@ export default function AppSidebar({
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
+        <SidebarContent className="px-2">
+          {server.channels.map((channel) => (
+            <SidebarMenuButton key={channel.id} className="gap-1.5">
+              {channel.kind === 'voice' ? <MicIcon /> : <HashIcon />}
+              {channel.name}
+            </SidebarMenuButton>
+          ))}
+        </SidebarContent>
       </Sidebar>
-      <SidebarInset>{children}</SidebarInset>
-    </SidebarProvider>
+      {children}
+    </SidebarProvider> :
+    children
   );
 }

src/types/Server.ts

@@ -0,0 +1,11 @@
+export interface Channel {
+  id: string;
+  name: string;
+  kind: "text" | "voice";
+}
+
+export default interface Server {
+  id: string;
+  name: string;
+  channels: Channel[];
+}