39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
/**
|
|
* @file components/sidebar/ChannelSidebar.tsx
|
|
* @description Sidebar component for server navigation, rendering channel lists.
|
|
*/
|
|
|
|
import { Hash } from "lucide-react";
|
|
|
|
/**
|
|
* Navigation sidebar displaying server details and text channels.
|
|
*
|
|
* @returns {JSX.Element} The rendered channel sidebar element.
|
|
*/
|
|
export function ChannelSidebar() {
|
|
return (
|
|
<aside className="w-60 bg-surface flex flex-col border-r border-background shrink-0 h-full">
|
|
<header className="h-12 border-b border-background flex items-center px-4 font-semibold text-foreground shrink-0">
|
|
Waveform Community
|
|
</header>
|
|
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-4">
|
|
<div>
|
|
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider mb-2 px-2">
|
|
Text Channels
|
|
</h2>
|
|
<nav className="space-y-0.5">
|
|
<button className="w-full text-left px-2 py-1.5 rounded text-muted hover:bg-background hover:text-foreground font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer">
|
|
<Hash className="w-4 h-4 text-muted shrink-0" />
|
|
<span className="truncate">general</span>
|
|
</button>
|
|
<button className="w-full text-left px-2 py-1.5 rounded text-muted hover:bg-background hover:text-foreground font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer">
|
|
<Hash className="w-4 h-4 text-muted shrink-0" />
|
|
<span className="truncate">dev-talk</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|