Event Card

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { Button } from '$lib/components/ui/button';
4	import { Check, Loader2 } from '@lucide/svelte';
5	import type { Snippet } from 'svelte';
6
7	let {
8		eventColor = '#3b82f6',
9		status = 'idle',
10		variant = 'display',
11		label,
12		completedLabel = 'Completed',
13		actionLabel = 'Confirm',
14		isDotted = false,
15		opacity = 1,
16		onAction,
17		class: className,
18		children
19	}: {
20		eventColor?: string;
21		status?: 'idle' | 'loading' | 'completed';
22		variant?: 'display' | 'action';
23		label?: string;
24		completedLabel?: string;
25		actionLabel?: string;
26		isDotted?: boolean;
27		opacity?: number;
28		onAction?: () => void;
29		class?: string;
30		children: Snippet;
31	} = $props();
32</script>
33
34<div
35	class={cn(
36		'relative flex w-full overflow-hidden rounded-xl border transition-all duration-200',
37		isDotted && 'border-dashed',
38		className
39	)}
40	style="opacity: {opacity}; background-color: {eventColor}15; border-color: {eventColor}30;"
41>
42	<div
43		class="absolute left-1 top-2 bottom-2 w-1 rounded-full"
44		style="background-color: {eventColor}"
45	></div>
46
47	<div class="flex w-full items-center justify-between p-4 pl-6">
48		<div class="flex flex-1 flex-col gap-0.5 overflow-hidden">
49			{#if label}
50				<span
51					class="mb-0.5 text-[10px] font-bold uppercase tracking-wider"
52					style="color: {eventColor}"
53				>
54					{label}
55				</span>
56			{/if}
57			{@render children()}
58		</div>
59
60		{#if variant === 'action'}
61			<div class="ml-4 flex shrink-0 items-center">
62				<Button
63					size="sm"
64					variant="default"
65					disabled={status === 'loading' || status === 'completed'}
66					onclick={onAction}
67					class="min-w-[90px] gap-2"
68				>
69					{#if status === 'loading'}
70						<Loader2 class="h-3.5 w-3.5 animate-spin" />
71					{:else if status === 'completed'}
72						<Check class="h-3.5 w-3.5" />
73						{completedLabel}
74					{:else}
75						{actionLabel}
76					{/if}
77				</Button>
78			</div>
79		{/if}
80	</div>
81</div>