forked from coracle/flotilla
Jon Staab
32 lines
823 B
Svelte
32 lines
823 B
Svelte
<script lang="ts">
|
|
import type {Snippet} from "svelte"
|
|
import {fly} from "@lib/transition"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
|
|
type Props = {
|
|
icon?: string
|
|
title: string
|
|
children?: Snippet
|
|
action?: Snippet
|
|
}
|
|
|
|
const {icon, title, children, action}: Props = $props()
|
|
</script>
|
|
|
|
<div
|
|
class="m-auto flex max-w-sm flex-col items-center gap-3 px-4 py-12 text-center"
|
|
in:fly={{y: 16}}>
|
|
{#if icon}
|
|
<div class="bg-primary/10 text-primary center size-16 rounded-full motion-safe:animate-float">
|
|
<Icon {icon} size={8} />
|
|
</div>
|
|
{/if}
|
|
<h3 class="font-display text-xl font-bold tracking-tight">{title}</h3>
|
|
{#if children}
|
|
<p class="text-sm opacity-70">{@render children?.()}</p>
|
|
{/if}
|
|
{#if action}
|
|
<div class="mt-1">{@render action?.()}</div>
|
|
{/if}
|
|
</div>
|