67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
/**
|
|
* @file components/sidebar/MemberSidebar.tsx
|
|
* @description Sidebar component displaying lists of online and offline channel members with avatar and status indicators.
|
|
*/
|
|
|
|
/**
|
|
* Renders the member sidebar showing categorized online and offline user statuses.
|
|
*
|
|
* @returns {JSX.Element} The rendered member sidebar interface.
|
|
*/
|
|
export function MemberSidebar() {
|
|
return (
|
|
<div className="w-full bg-surface p-3 shrink-0 h-full overflow-y-auto space-y-4">
|
|
{/* Online Section */}
|
|
<div>
|
|
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider px-2 mb-1.5">
|
|
Online — 1
|
|
</h2>
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-background/50 transition-colors cursor-pointer group">
|
|
<div className="relative shrink-0">
|
|
<div className="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center font-bold text-xs text-white">
|
|
U
|
|
</div>
|
|
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-emerald-500 ring-2 ring-surface" />
|
|
</div>
|
|
<span className="text-sm font-medium text-muted group-hover:text-white truncate">
|
|
User 1
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Offline Section */}
|
|
<div>
|
|
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider px-2 mb-1.5">
|
|
Offline — 2
|
|
</h2>
|
|
<div className="space-y-0.5 opacity-65">
|
|
<div className="flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-background/50 transition-colors cursor-pointer group">
|
|
<div className="relative shrink-0">
|
|
<div className="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center font-bold text-xs text-white">
|
|
U
|
|
</div>
|
|
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-slate-500 ring-2 ring-surface" />
|
|
</div>
|
|
<span className="text-sm font-medium text-muted group-hover:text-white truncate">
|
|
User 2
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-background/50 transition-colors cursor-pointer group">
|
|
<div className="relative shrink-0">
|
|
<div className="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center font-bold text-xs text-white">
|
|
U
|
|
</div>
|
|
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-slate-500 ring-2 ring-surface" />
|
|
</div>
|
|
<span className="text-sm font-medium text-muted group-hover:text-white truncate">
|
|
User 3
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|