60 lines
1.5 KiB
Svelte
60 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import "./layout.css";
|
|
import favicon from "$lib/assets/favicon.svg";
|
|
import { ModeWatcher } from "mode-watcher";
|
|
import {
|
|
CalendarDate,
|
|
today,
|
|
getLocalTimeZone,
|
|
} from "@internationalized/date";
|
|
|
|
import Header from "$lib/components/header.svelte";
|
|
import Calendar from "$lib/components/calendar.svelte";
|
|
import EntrySummaryView from "$lib/components/entrySummaryView.svelte";
|
|
import { goto } from "$app/navigation";
|
|
|
|
let { children, data } = $props();
|
|
let dateValue = $derived(data.date);
|
|
let entries = $derived(data.entries);
|
|
let title = $state("Memento")
|
|
|
|
$effect(() => {
|
|
// Navigate when dateValue changes
|
|
goto(`/${dateValue}`);
|
|
title = `Memento: ${dateValue}`
|
|
|
|
});
|
|
|
|
$effect(() => {
|
|
// Sync dateValue with data.date when it changes
|
|
dateValue = data.date;
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{title}</title>
|
|
<link rel="icon" href={favicon} />
|
|
</svelte:head>
|
|
<ModeWatcher />
|
|
|
|
<div
|
|
class="flex flex-col md:flex-row space-y-4 w-full mt-6 mx-auto md:max-w-3/4"
|
|
>
|
|
<div class="md:w-1/2 md:order-2">
|
|
<Header />
|
|
|
|
{#key dateValue}
|
|
{@render children()}
|
|
{/key}
|
|
</div>
|
|
|
|
<div class="md:w-1/2 lg:max-w-1/4 space-y-4 md:mr-4">
|
|
<Calendar bind:value={dateValue} />
|
|
<ul class="space-y-4">
|
|
{#each entries as entry}
|
|
<EntrySummaryView {entry} bind:value={dateValue} />
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|