pdsls.dev
1import { createSignal, For, Show } from "solid-js";
2import { createStore } from "solid-js/store";
3
4export type Notification = {
5 id: string;
6 message: string;
7 progress?: number;
8 total?: number;
9 type?: "info" | "success" | "error";
10};
11
12const [notifications, setNotifications] = createStore<Notification[]>([]);
13const [removingIds, setRemovingIds] = createSignal<Set<string>>(new Set());
14
15export const addNotification = (notification: Omit<Notification, "id">) => {
16 const id = `notification-${Date.now()}-${Math.random()}`;
17 setNotifications(notifications.length, { ...notification, id });
18 return id;
19};
20
21export const updateNotification = (id: string, updates: Partial<Notification>) => {
22 setNotifications((n) => n.id === id, updates);
23};
24
25export const removeNotification = (id: string) => {
26 setRemovingIds(new Set([...removingIds(), id]));
27 setTimeout(() => {
28 setNotifications((n) => n.filter((notification) => notification.id !== id));
29 setRemovingIds((ids) => {
30 const newIds = new Set(ids);
31 newIds.delete(id);
32 return newIds;
33 });
34 }, 250);
35};
36
37export const NotificationContainer = () => {
38 return (
39 <div class="pointer-events-none fixed bottom-4 left-4 z-60 flex flex-col gap-2">
40 <For each={notifications}>
41 {(notification) => (
42 <div
43 class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto flex min-w-64 flex-col gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 shadow-md select-none dark:border-neutral-700"
44 classList={{
45 "border-blue-500 dark:border-blue-400": notification.type === "info",
46 "border-green-500 dark:border-green-400": notification.type === "success",
47 "border-red-500 dark:border-red-400": notification.type === "error",
48 "animate-[slideIn_0.25s_ease-in]": !removingIds().has(notification.id),
49 "animate-[slideOut_0.25s_ease-in]": removingIds().has(notification.id),
50 }}
51 onClick={() => removeNotification(notification.id)}
52 >
53 <div class="flex items-center gap-2 text-sm">
54 <Show when={notification.progress !== undefined}>
55 <span class="iconify lucide--download" />
56 </Show>
57 <Show when={notification.type === "success"}>
58 <span class="iconify lucide--check-circle text-green-600 dark:text-green-400" />
59 </Show>
60 <Show when={notification.type === "error"}>
61 <span class="iconify lucide--x-circle text-red-500 dark:text-red-400" />
62 </Show>
63 <span>{notification.message}</span>
64 </div>
65 <Show when={notification.progress !== undefined}>
66 <div class="flex flex-col gap-1">
67 <Show
68 when={notification.total !== undefined && notification.total > 0}
69 fallback={
70 <div class="text-xs text-neutral-600 dark:text-neutral-400">
71 {notification.progress} MB
72 </div>
73 }
74 >
75 <div class="h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700">
76 <div
77 class="h-full rounded-full bg-blue-500 transition-all dark:bg-blue-400"
78 style={{ width: `${notification.progress}%` }}
79 />
80 </div>
81 <div class="text-xs text-neutral-600 dark:text-neutral-400">
82 {notification.progress}%
83 </div>
84 </Show>
85 </div>
86 </Show>
87 </div>
88 )}
89 </For>
90 </div>
91 );
92};