Ananto30/ask-hadith

<script lang="ts">
    import { fade } from 'svelte/transition';
    import { onMount } from 'svelte';
    import Hadith from '$lib/Hadith.svelte';
    import type { HadithModel } from '../../models';

    let bookmarkedHadiths: HadithModel[] = [];

    onMount(
        () => (bookmarkedHadiths = JSON.parse(localStorage.getItem('bookmarkedHadiths') || '[]') || [])
    );
</script>

<svelte:head>
    <title>Ask Hadith: Bookmarks</title>
    <meta name="description" content="Bookmarked Hadiths" />
</svelte:head>

<div in:fade class="mx-auto max-w-4xl">
    <p class="flex items-center justify-center px-4 text-xs text-gray-500">
        *Please note that these bookmarks are saved in local cache, so if you clear data/cache, it will
        be gone!
    </p>
    {#if bookmarkedHadiths?.length == 0}
        <p class="flex items-center justify-center py-20">No bookmarks found!</p>
    {:else}
        <div class="flex flex-col">
            <div class="mx-auto">
                {#each bookmarkedHadiths as hadith}
                    <Hadith bind:hadith />
                {/each}
            </div>
        </div>
    {/if}
</div>