You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
927 B
31 lines
927 B
3 months ago
|
<script lang="ts">
|
||
|
|
/**
|
||
|
|
* The preview is its OWN page — `@` resets the layout. Axes arrive via the URL
|
||
|
|
* so the demo's iframe can drive them.
|
||
|
|
*/
|
||
|
|
import { page } from '$app/state';
|
||
|
|
import BootUix, { type BootLanguage } from '../../_lib/BootUix.svelte';
|
||
|
|
import '@/uix/eidos/index.css';
|
||
|
|
|
||
|
|
let { children } = $props();
|
||
|
|
|
||
|
|
const mode = $derived(page.url.searchParams.get('mode') === 'dark' ? 'dark' : 'light');
|
||
|
|
const dir = $derived(page.url.searchParams.get('dir') === 'rtl' ? 'rtl' : 'ltr');
|
||
|
|
const language = $derived((page.url.searchParams.get('lang') ?? 'es') as BootLanguage);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:head>
|
||
|
|
<meta name="color-scheme" content="light dark" />
|
||
|
|
</svelte:head>
|
||
|
|
|
||
|
|
<BootUix {mode} {dir} {language}>
|
||
|
|
<div
|
||
|
|
data-theme={mode}
|
||
|
|
data-mode={mode}
|
||
|
|
{dir}
|
||
|
|
style="min-block-size: 100dvh; background: var(--color-surface-default); color: var(--color-content-primary);"
|
||
|
|
>
|
||
|
|
{@render children?.()}
|
||
|
|
</div>
|
||
|
|
</BootUix>
|