Files
app/src/routes/+page.svelte
2024-03-12 23:07:07 +01:00

58 lines
1.6 KiB
Svelte

<script>
// @ts-nocheck
import { Label } from '$lib/components/ui/label';
import { Button } from '$lib/components/ui/button';
import Player from '$lib/components/organisms/player.svelte';
import { onMount } from 'svelte';
import { PlayIcon, Loader, Plus, MailIcon, PlusIcon } from 'lucide-svelte';
import CreateGroup from '$lib/components/organisms/create-group.svelte';
let script = "";
let opened = false;
let groups = [];
let pods = []
onMount(async () => {
let res = await (await fetch("/")).json();
console.log(res);
script = res.script;
res = await (await fetch("/api/groups")).json();
groups = res.groups;
});
</script>
{#if opened}
<Player script={script} on:close={() => opened=false} />
{/if}
<div class="flex gap-4 flex-col">
<Label>Your Latest Podcasts</Label>
{#each pods as pod}
<Button class="flex w-full flex-row justify-start rounded text-left" variant="secondary" on:click={() => opened = true}>
<div class="items-center justify-center rounded-lg p-2 pl-0">
<PlayIcon class="h-4 w-4" />
</div>
<div>
<h3 class="text-md">Your Daily Pod</h3>
<p class="text-sm text-muted-foreground">{new Date(pod.date_created).toLocaleDateString('de')}</p>
</div>
</Button>
{/each}
<Label>Your Groups</Label>
<div class="overflow-x-scroll scrollbars-hidden">
<CreateGroup />
{#each groups as group}
<Button class="mt-4 flex w-full flex-row justify-start rounded text-left" variant="secondary">
<div class="items-center justify-center rounded-lg p-2 pl-0">
<MailIcon class="h-4 w-4" />
</div>
<div>
<h3 class="text-md">{group.name}</h3>
</div>
</Button>
{/each}
</div>
</div>