johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { customOf, styleOf, type Palette } from '#lib/theme.ts';
	import HalfTag from '#lib/atoms/HalfTag.svelte';
	import Person from '#lib/molecules/Person.svelte';
	/**
	 * A theme someone made, `theme`: a card drawn in its own colours, its
	 * name and, given its maker's handle, who made it. To choose, with
	 * `pick`, a radio, `checked` while the pages are drawn in it, and
	 * `half`, which halves of a pair it draws, if any; `menu`, what else
	 * can be done with it, at its name's end. Or, to collect, without
	 * `pick`, `action` at its name's end, as adding it.
	 */
	let {
		theme,
		checked = false,
		pick,
		half,
		menu,
		action
	}: {
		theme: { name?: string; palette: Palette; creator?: { handle: string } };
		checked?: boolean;
		pick?: () => void;
		half?: { day: boolean; night: boolean };
		menu?: Snippet;
		action?: Snippet;
	} = $props();
	const name = $derived(theme.name ?? 'Untitled');
</script>

{#snippet preview()}
	<span
		class="theme-preview"
		data-theme={customOf(theme.palette)}
		style={styleOf(theme.palette)}
		aria-hidden="true"
	>
		<span class="theme-line"></span>
		<span class="theme-line short"></span>
		<span class="theme-dots"
			><span class="theme-dot primary"></span><span class="theme-dot accent"></span><span
				class="theme-dot green"
			></span><span class="theme-dot red"></span></span
		>
	</span>
{/snippet}

{#snippet made()}
	<span class="theme-made"
		><span class="theme-title" title={name}>{name}</span>{#if theme.creator}<span class="mute clip"
				>by <Person handle={theme.creator.handle} /></span
			>{/if}</span
	>
{/snippet}

{#snippet card()}
	<label class="theme-choice">
		{@render preview()}
		<span class="theme-name"
			><input type="radio" name="theme" {checked} onchange={pick} />{@render made()}</span
		>
		{#if half}<HalfTag {...half} />{/if}
	</label>
{/snippet}

{#if !pick}
	<div class="theme-choice theme-found">
		{@render preview()}
		<div class="theme-name">{@render made()}{@render action?.()}</div>
	</div>
{:else if menu}<div class="theme-owned">
		{@render card()}<span class="theme-menu">{@render menu()}</span>
	</div>{:else}{@render card()}{/if}