34 lines
735 B
Svelte
34 lines
735 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
/** The glassy card most overlay components sit on. */
|
|
const {
|
|
accent,
|
|
children,
|
|
class: className = '',
|
|
edge = 'none'
|
|
}: {
|
|
accent: string;
|
|
children: Snippet;
|
|
class?: string;
|
|
edge?: 'top' | 'bottom' | 'left' | 'none';
|
|
} = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="relative size-full overflow-hidden border border-white/10 bg-zinc-950/80 backdrop-blur-md {className}"
|
|
style="border-radius:var(--radius)"
|
|
>
|
|
{#if edge !== 'none'}
|
|
<div
|
|
class="absolute {edge === 'top'
|
|
? 'inset-x-0 top-0 h-1'
|
|
: edge === 'bottom'
|
|
? 'inset-x-0 bottom-0 h-1'
|
|
: 'inset-y-0 left-0 w-1'}"
|
|
style="background:{accent}"
|
|
></div>
|
|
{/if}
|
|
{@render children()}
|
|
</div>
|