obsidian-book-tracker/src/ui/components/setting/Item.svelte

40 lines
847 B
Svelte

<script lang="ts">
import type { Snippet } from "svelte";
type Props = {
name: Snippet | string;
description?: Snippet | string;
control: Snippet;
};
let { name, description, control }: Props = $props();
const descriptionLines = $derived(
typeof description === "string" ? description.split("\n") : [],
);
</script>
<div class="setting-item">
<div class="setting-item-info">
<div class="setting-item-name">
{#if typeof name === "string"}
{name}
{:else}
{@render name()}
{/if}
</div>
{#if description}
<div class="setting-item-description">
{#if typeof description === "string"}
{#each descriptionLines as line}
<div>{line}</div>
{/each}
{:else}
{@render description()}
{/if}
</div>
{/if}
</div>
<div class="setting-item-control">{@render control()}</div>
</div>