alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import type { Snippet } from "svelte";
3 import Logo from "./Logo.svelte";
4
5 interface Props {
6 title?: string;
7 class?: string;
8 children?: Snippet;
9 }
10
11 let { title, class: className, children }: Props = $props();
12</script>
13
14<div
15 class={`relative flex aspect-video flex-col gap-6 overflow-hidden rounded-lg border border-border-default bg-background-subtle p-8 ${className ?? ""}`}
16>
17 <div
18 class="pointer-events-none absolute inset-0 bg-[radial-gradient(var(--color-border-strong)_1px,transparent_1px)] bg-[length:12px_12px] [mask-image:linear-gradient(to_bottom,transparent,black)] opacity-60"
19 aria-hidden="true"
20 ></div>
21 <div class="relative z-10 flex flex-col gap-6">
22 <Logo wordmark />
23 {#if children}
24 {@render children()}
25 {:else if title}
26 <span class="text-2xl font-bold text-foreground-default sm:text-3xl">{title}</span>
27 {/if}
28 </div>
29</div>