mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-03 21:19:06 +00:00
33 lines
873 B
Svelte
33 lines
873 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { Component } from 'svelte';
|
|
import { cn } from '$lib/utils.js';
|
|
|
|
interface Props {
|
|
icon?: Component;
|
|
title: string;
|
|
description?: string;
|
|
class?: string;
|
|
children?: Snippet;
|
|
}
|
|
|
|
let { icon: Icon, title, description, class: className, children }: Props = $props();
|
|
</script>
|
|
|
|
<div class={cn("flex flex-col items-center justify-center py-12 px-4 text-center", className)}>
|
|
{#if Icon}
|
|
<div class="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
|
|
<Icon class="w-6 h-6 text-muted-foreground" />
|
|
</div>
|
|
{/if}
|
|
<h3 class="text-lg font-medium text-foreground mb-1">{title}</h3>
|
|
{#if description}
|
|
<p class="text-sm text-muted-foreground max-w-sm mb-4">{description}</p>
|
|
{/if}
|
|
{#if children}
|
|
<div class="mt-2">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
</div>
|