50 lines
1.8 KiB
Svelte
50 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
|
import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar/index.js";
|
|
import UserIcon from "@lucide/svelte/icons/user";
|
|
|
|
// Sample members data
|
|
const members = [
|
|
{ id: 1, name: "Alice", status: "online", image: "https://placehold.co/40x40" },
|
|
{ id: 2, name: "Bob", status: "online", image: "https://placehold.co/40x40" },
|
|
{ id: 3, name: "Charlie", status: "offline", image: "https://placehold.co/40x40" },
|
|
{ id: 4, name: "Diana", status: "online", image: "https://placehold.co/40x40" },
|
|
{ id: 5, name: "Eve", status: "dnd", image: "https://placehold.co/40x40" },
|
|
];
|
|
|
|
// Status colors
|
|
const statusColors = {
|
|
online: "bg-green-500",
|
|
offline: "bg-gray-500",
|
|
dnd: "bg-red-500"
|
|
};
|
|
</script>
|
|
|
|
<Sidebar.Root class="w-64 border-l">
|
|
<Sidebar.Header class="p-4 border-b">
|
|
<h3 class="font-medium">Members ({members.length})</h3>
|
|
</Sidebar.Header>
|
|
|
|
<Sidebar.Content class="p-2">
|
|
<Sidebar.Group>
|
|
<Sidebar.Menu>
|
|
{#each members as member (member.id)}
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton class="w-full justify-start gap-3">
|
|
<div class="relative">
|
|
<Avatar class="size-8">
|
|
<AvatarImage src={member.image} alt={member.name} />
|
|
<AvatarFallback>
|
|
<UserIcon class="size-4" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span class={`absolute bottom-0 right-0 block size-2 rounded-full ring-1 ring-white ${statusColors[member.status]}`}></span>
|
|
</div>
|
|
<span class="truncate">{member.name}</span>
|
|
</Sidebar.MenuButton>
|
|
</Sidebar.MenuItem>
|
|
{/each}
|
|
</Sidebar.Menu>
|
|
</Sidebar.Group>
|
|
</Sidebar.Content>
|
|
</Sidebar.Root>
|