75 lines
2.8 KiB
Svelte
75 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { Status, type Server, type Group, type Friend } from "$lib";
|
|
import AppSidebar from "$lib/components/app-sidebar.svelte";
|
|
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
|
|
|
let currentPageID: string|null = $state(null);
|
|
let currentPageType: string|null = $state(null);
|
|
let currentPage: Friend | Group | Server | null = $state(null);
|
|
|
|
const overview_data = {
|
|
friends: [
|
|
{ id: crypto.randomUUID(), name: "Alice", status: Status.OFFLINE, image: "https://placehold.co/40x40" },
|
|
{ id: crypto.randomUUID(), name: "Bob", status: Status.DND, image: "https://placehold.co/40x40" },
|
|
{ id: crypto.randomUUID(), name: "Charlie", status: Status.ONLINE, image: "https://placehold.co/40x40" },
|
|
],
|
|
groups: [
|
|
{ id: crypto.randomUUID(), name: "Work Team", members: 5 },
|
|
{ id: crypto.randomUUID(), name: "Gaming Group", members: 8 },
|
|
],
|
|
servers: [
|
|
{ id: crypto.randomUUID(), name: "Main Server", image: "https://placehold.co/40x40" },
|
|
{ id: crypto.randomUUID(), name: "Backup Server", image: "https://placehold.co/40x40" },
|
|
],
|
|
};
|
|
|
|
$effect(() => {
|
|
if (currentPageID) {
|
|
let f = overview_data.friends.find(friend => friend.id === currentPageID);
|
|
let g = overview_data.groups.find(group => group.id === currentPageID);
|
|
let s = overview_data.servers.find(server => server.id === currentPageID);
|
|
|
|
if(f) {
|
|
currentPageType = "friend";
|
|
currentPage = f;
|
|
} else if(g) {
|
|
currentPageType = "group";
|
|
currentPage = g;
|
|
} else if(s) {
|
|
currentPageType = "server";
|
|
currentPage = s;
|
|
}
|
|
} else {
|
|
currentPage = null;
|
|
currentPageType = null;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<Sidebar.Provider>
|
|
<AppSidebar bind:currentPage={currentPageID} data={overview_data} />
|
|
|
|
<Sidebar.Inset>
|
|
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
<Sidebar.Trigger class="-ms-1" />
|
|
{#if currentPageType == "server"}
|
|
{@const server = (currentPage as Server)}
|
|
|
|
<img src={server!.image} alt={server!.name} class="size-6 rounded-full" />
|
|
|
|
<h1>{server!.name}</h1>
|
|
{:else if currentPageType == "friend"}
|
|
{@const friend = (currentPage as Friend)}
|
|
|
|
<img src={friend.image} alt={friend!.name} class="size-6 rounded-full" />
|
|
|
|
<h1>{friend!.name} [{friend.status == Status.ONLINE ? "Online!" : friend.status == Status.DND ? "DND" : friend.status == Status.OFFLINE ? "Offline" : "Unknown"}]</h1>
|
|
{:else if currentPageType == "group"}
|
|
{@const group = (currentPage as Group)}
|
|
|
|
<h1>{group!.name} ({group.members} member{group.members > 1 ? "s" : ""})</h1>
|
|
{/if}
|
|
</header>
|
|
<h1> this is like lowkirkounely the content, i should put messages and shi here</h1>
|
|
</Sidebar.Inset>
|
|
</Sidebar.Provider>
|