40 lines
925 B
Svelte
40 lines
925 B
Svelte
|
<!--
|
||
|
|
Component: Line
|
||
|
|
Renders a line of text in the SliderArea
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import type { Snippet } from 'svelte';
|
||
|
|
import { comparisonStore } from '../../model';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* Line text
|
||
|
|
*/
|
||
|
|
text: string;
|
||
|
|
/**
|
||
|
|
* DOM element reference
|
||
|
|
*/
|
||
|
|
element?: HTMLElement;
|
||
|
|
/**
|
||
|
|
* Character render snippet
|
||
|
|
*/
|
||
|
|
character: Snippet<[{ char: string; index: number }]>;
|
||
|
|
}
|
||
|
|
const typography = $derived(comparisonStore.typography);
|
||
|
|
|
||
|
|
let { text, element = $bindable<HTMLElement>(), character }: Props = $props();
|
||
|
|
|
||
|
|
const characters = $derived(text.split(''));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
bind:this={element}
|
||
|
|
class="relative flex w-full justify-center items-center whitespace-nowrap"
|
||
|
|
style:height="{typography.height}em"
|
||
|
|
style:line-height="{typography.height}em"
|
||
|
|
>
|
||
|
|
{#each characters as char, index}
|
||
|
|
{@render character?.({ char, index })}
|
||
|
|
{/each}
|
||
|
|
</div>
|