Thomas G. Lopes
commited on
Commit
·
5500bfc
1
Parent(s):
19d1d46
toasts
Browse files
src/lib/components/quota-modal.svelte
CHANGED
@@ -61,14 +61,17 @@
|
|
61 |
</button>
|
62 |
|
63 |
<!-- Modal body -->
|
64 |
-
<div class="p-4
|
65 |
-
<p
|
|
|
|
|
66 |
You have reached your usage limits. To continue using the playground, please consider creating a PRO
|
67 |
account!
|
68 |
</p>
|
69 |
-
<p class="mt-4 text-gray-400">
|
70 |
-
By subscribing to PRO, you get <span class="text-white"
|
71 |
-
|
|
|
72 |
</p>
|
73 |
<ul class="mt-4 flex flex-col gap-2">
|
74 |
{#each actions as action}
|
|
|
61 |
</button>
|
62 |
|
63 |
<!-- Modal body -->
|
64 |
+
<div class="p-4 md:p-5 dark:text-white">
|
65 |
+
<p
|
66 |
+
class="rounded-xl border border-amber-900 bg-amber-700/25 p-4 font-medium text-amber-800 dark:bg-amber-800/25 dark:text-amber-200"
|
67 |
+
>
|
68 |
You have reached your usage limits. To continue using the playground, please consider creating a PRO
|
69 |
account!
|
70 |
</p>
|
71 |
+
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
72 |
+
By subscribing to PRO, you get <span class="text-black dark:text-white"
|
73 |
+
>$2 worth of Inference credits every month.</span
|
74 |
+
> Meaning you could:
|
75 |
</p>
|
76 |
<ul class="mt-4 flex flex-col gap-2">
|
77 |
{#each actions as action}
|
src/lib/components/toaster.svelte
CHANGED
@@ -60,7 +60,7 @@
|
|
60 |
out:fly={{ y: 20 }}
|
61 |
style={getToastStyle(i)}
|
62 |
>
|
63 |
-
<h3 {...toast.title} class="text-sm font-
|
64 |
{toast.data.title}
|
65 |
</h3>
|
66 |
|
@@ -117,7 +117,7 @@
|
|
117 |
background: unset;
|
118 |
padding: 0;
|
119 |
|
120 |
-
border:
|
121 |
height: var(--h);
|
122 |
}
|
123 |
|
|
|
60 |
out:fly={{ y: 20 }}
|
61 |
style={getToastStyle(i)}
|
62 |
>
|
63 |
+
<h3 {...toast.title} class="text-sm font-semibold whitespace-nowrap text-gray-700 dark:text-gray-300">
|
64 |
{toast.data.title}
|
65 |
</h3>
|
66 |
|
|
|
117 |
background: unset;
|
118 |
padding: 0;
|
119 |
|
120 |
+
border: none;
|
121 |
height: var(--h);
|
122 |
}
|
123 |
|
src/lib/components/toaster.svelte.ts
CHANGED
@@ -8,7 +8,7 @@ export type ToastData = {
|
|
8 |
|
9 |
export const toaster = new Toaster<ToastData>({
|
10 |
hover: "pause-all",
|
11 |
-
closeDelay: 0,
|
12 |
});
|
13 |
|
14 |
export function addToast(data: ToastData) {
|
@@ -19,20 +19,21 @@ export function removeToast(id: string) {
|
|
19 |
toaster.removeToast(id);
|
20 |
}
|
21 |
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
|
|
|
8 |
|
9 |
export const toaster = new Toaster<ToastData>({
|
10 |
hover: "pause-all",
|
11 |
+
// closeDelay: 0,
|
12 |
});
|
13 |
|
14 |
export function addToast(data: ToastData) {
|
|
|
19 |
toaster.removeToast(id);
|
20 |
}
|
21 |
|
22 |
+
// Debugging
|
23 |
+
// addToast({
|
24 |
+
// title: "Hello World 1",
|
25 |
+
// description: "hey",
|
26 |
+
// variant: "success",
|
27 |
+
// });
|
28 |
+
//
|
29 |
+
// addToast({
|
30 |
+
// title: "Hello World 2",
|
31 |
+
// description: "hey",
|
32 |
+
// variant: "success",
|
33 |
+
// });
|
34 |
+
//
|
35 |
+
// addToast({
|
36 |
+
// title: "Hello World 3",
|
37 |
+
// description: "hi",
|
38 |
+
// variant: "success",
|
39 |
+
// });
|