mirror of https://github.com/VERT-sh/VERT.git
82 lines
2.1 KiB
Svelte
82 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { duration, fade, fly } from "$lib/animation";
|
|
import { removeDialog } from "$lib/store/DialogProvider";
|
|
import { BanIcon, CheckIcon, InfoIcon, TriangleAlert } from "lucide-svelte";
|
|
import { quintOut } from "svelte/easing";
|
|
import type { Dialog as DialogType } from "$lib/store/DialogProvider";
|
|
|
|
type Props = DialogType;
|
|
|
|
let props: Props = $props();
|
|
const { id, title, message, buttons, type } = props;
|
|
const additional = "additional" in props ? props.additional : undefined;
|
|
|
|
const colors = {
|
|
success: "purple",
|
|
error: "red",
|
|
info: "blue",
|
|
warning: "pink",
|
|
};
|
|
|
|
const Icons = {
|
|
success: CheckIcon,
|
|
error: BanIcon,
|
|
info: InfoIcon,
|
|
warning: TriangleAlert,
|
|
};
|
|
|
|
let color = $derived(colors[type]);
|
|
let Icon = $derived(Icons[type]);
|
|
</script>
|
|
|
|
<div
|
|
class="flex flex-col items-center justify-between w-full max-w-sm p-4 gap-6 bg-panel border-accent-{color}-alt rounded-lg shadow-md"
|
|
in:fly={{
|
|
duration,
|
|
easing: quintOut,
|
|
x: 0,
|
|
y: 100,
|
|
}}
|
|
out:fade={{
|
|
duration,
|
|
easing: quintOut,
|
|
}}
|
|
>
|
|
<div class="flex justify-between w-full items-center">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="rounded-full bg-accent-{color} p-2 inline-block w-8 h-8"
|
|
>
|
|
<Icon size="16" color="black" />
|
|
</div>
|
|
<p class="text-lg font-semibold">{title}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1 w-full">
|
|
{#if typeof message === "string"}
|
|
<p class="text-sm font-normal text-muted whitespace-pre-wrap">{message}</p>
|
|
{:else}
|
|
{@const MessageComponent = message}
|
|
<div class="text-sm font-normal text-muted">
|
|
<MessageComponent {id} {title} {type} {buttons} {additional} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="flex flex-row items-center gap-4 w-full">
|
|
{#each buttons as { text, action }, i}
|
|
<button
|
|
class="hover:scale-105 active:scale-100 duration-200 flex items-center gap-2 p-2 rounded-md {i ===
|
|
1
|
|
? `bg-accent-${color} text-black`
|
|
: 'bg-button text-black dynadark:text-white'} px-6"
|
|
onclick={() => {
|
|
action();
|
|
removeDialog(id);
|
|
}}
|
|
>
|
|
{text}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|