alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import GalleryVertical from "$icon/gallery-vertical";
4 import Button from "$lib/components/ui/Button.svelte";
5 import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
6 import Timeline from "$lib/components/timeline/Timeline.svelte";
7 import type { PageData } from "./$types";
8
9 let { data }: { data: PageData } = $props();
10</script>
11
12<svelte:head>
13 <title>Timeline · Tangled</title>
14</svelte:head>
15
16<section class="mx-auto flex w-full max-w-screen-md flex-col gap-4 px-6 py-8">
17 <div class="flex items-center justify-between">
18 <h1 class="flex items-center gap-2 text-2xl font-semibold">
19 <GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" />
20 Timeline
21 </h1>
22 {#if data.signedIn}
23 <ButtonGroup>
24 <Button
25 href={resolve("/timeline" as "/")}
26 variant={data.followingOnly ? "ghost" : "default"}>Global</Button
27 >
28 <Button
29 href={resolve("/timeline?following=true" as "/")}
30 variant={data.followingOnly ? "default" : "ghost"}>Following</Button
31 >
32 </ButtonGroup>
33 {/if}
34 </div>
35
36 <Timeline
37 feed={data.feed ?? []}
38 emptyMessage={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
39 />
40</section>