generated from tpl/obsidian-sample-plugin
50 lines
1.5 KiB
Svelte
50 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { Color, isColorName, type ColorName } from "@utils/color";
|
|
import BookText from "./BookText.svelte";
|
|
import BookStackColoredSpine from "./designs/stack/BookStackColoredSpine.svelte";
|
|
import BookStackDefault from "./designs/stack/BookStackDefault.svelte";
|
|
import BookStackDualTopBands from "./designs/stack/BookStackDualTopBands.svelte";
|
|
import BookStackSplitBands from "./designs/stack/BookStackSplitBands.svelte";
|
|
|
|
interface Props {
|
|
title?: string;
|
|
subtitle?: string;
|
|
color?: ColorName | string;
|
|
design?: "default" | "split-bands" | "dual-top-bands" | "colored-spine";
|
|
}
|
|
|
|
let {
|
|
title,
|
|
subtitle,
|
|
color: colorRaw = "green",
|
|
design,
|
|
}: Props = $props();
|
|
|
|
const color = $derived(
|
|
isColorName(colorRaw)
|
|
? Color.fromName(colorRaw).darken()
|
|
: Color.fromCSSColor(colorRaw),
|
|
);
|
|
const textColor = $derived(color.contrastColor.hex);
|
|
</script>
|
|
|
|
<li class="bookshelf__bookstack-elem">
|
|
{#if design === "split-bands"}
|
|
<BookStackSplitBands color={color.hex} {textColor}>
|
|
<BookText {title} {subtitle} />
|
|
</BookStackSplitBands>
|
|
{:else if design === "dual-top-bands"}
|
|
<BookStackDualTopBands color={color.hex} {textColor}>
|
|
<BookText {title} {subtitle} />
|
|
</BookStackDualTopBands>
|
|
{:else if design === "colored-spine"}
|
|
<BookStackColoredSpine color={color.hex} {textColor}>
|
|
<BookText {title} {subtitle} />
|
|
</BookStackColoredSpine>
|
|
{:else}
|
|
<BookStackDefault color={color.hex} {textColor}>
|
|
<BookText {title} {subtitle} />
|
|
</BookStackDefault>
|
|
{/if}
|
|
</li>
|