.

app/components/channel-list-item.tsx

@@ -0,0 +1,45 @@
+import { ChevronDown, Hash, Volume2 } from "lucide-react"
+import { Button } from "./ui/button"
+
+interface Channel {
+    id: string
+    name: string
+    type: "text" | "voice" | "category"
+}
+
+interface ChannelListItemProps {
+    channel: Channel
+}
+
+export default function ChannelListItem({ channel }: ChannelListItemProps) {
+    if (channel.type === "category") {
+        return (
+            <div className="text-xs flex flex-row justify-between mt-4">
+                <div className="grow">
+                    <div className="flex items-center gap-1">
+                        {channel.name}
+                        <ChevronDown className="size-4" />
+                    </div>
+                </div>
+                <div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <>
+            <Button variant="secondary" size="sm" className="justify-start">
+                <div className="flex items-center gap-2 max-w-72">
+                    <div>
+                        {channel.type === "text" && <Hash />}
+                        {channel.type === "voice" && <Volume2 />}
+                    </div>
+                    <div className="truncate">
+                        {channel.name}
+                    </div>
+                </div>
+            </Button>
+        </>
+    )
+}