Rune Harlyk
48 lines
1.4 KiB
Svelte
48 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { Component } from 'svelte'
|
|
|
|
type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
|
|
|
|
const {
|
|
icon,
|
|
title,
|
|
description = '',
|
|
variant = 'primary',
|
|
class: klass = '',
|
|
children = null
|
|
} = $props<{
|
|
icon?: Component
|
|
title: string
|
|
description?: string | number
|
|
variant?: Variant
|
|
class?: string
|
|
children?: () => Component
|
|
}>()
|
|
|
|
const Icon = $derived(icon)
|
|
|
|
const variants: Record<Variant, [string, string]> = {
|
|
success: ['bg-success', 'text-success-content'],
|
|
error: ['bg-error', 'text-error-content'],
|
|
primary: ['bg-primary', 'text-primary-content'],
|
|
info: ['bg-info', 'text-info-content'],
|
|
warning: ['bg-warning', 'text-warning-content']
|
|
}
|
|
|
|
const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
|
|
const [bgColor, textColor] = variants[variantKey]
|
|
</script>
|
|
|
|
<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2 {klass}">
|
|
{#if icon}
|
|
<div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
|
|
<Icon class="{textColor} h-auto w-full scale-75" />
|
|
</div>
|
|
{/if}
|
|
<div class="grow">
|
|
<div class="font-bold">{title}</div>
|
|
<div class="text-sm opacity-75 grow">{description}</div>
|
|
</div>
|
|
{@render children?.()}
|
|
</div>
|