28 lines
1.1 KiB
Svelte
28 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { BOOK_PRESETS } from '$lib/presets';
|
|
import { getBookCollectionState } from '$lib/state/bookCollection.svelte';
|
|
|
|
const bookCollection = getBookCollectionState();
|
|
</script>
|
|
|
|
<!--
|
|
Built-in views, not shelves: a fixed set every library has, so nothing here is
|
|
named, owned or persisted. The same definitions drive the home page's shelves,
|
|
so "Recently added" means the same thing in both places.
|
|
-->
|
|
<div class="flex items-center gap-1.5 overflow-x-auto" aria-label="Preset views">
|
|
{#each BOOK_PRESETS as preset (preset.id)}
|
|
{@const active = bookCollection.isPresetActive(preset)}
|
|
<button
|
|
type="button"
|
|
aria-pressed={active}
|
|
onclick={() => (active ? bookCollection.clearView() : bookCollection.applyPreset(preset))}
|
|
class="shrink-0 rounded-full border px-3 py-1 text-xs whitespace-nowrap transition-colors {active
|
|
? 'border-primary bg-primary text-primary-foreground font-medium'
|
|
: 'border-border text-muted-foreground hover:border-muted-foreground hover:text-foreground'}"
|
|
>
|
|
{preset.label}
|
|
</button>
|
|
{/each}
|
|
</div>
|