xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
toast
author
Morgan
date
(Nov 19, 2024, 12:24 AM +0100)
commit
fd5113db
fd5113db100dce5baec03e138a1849f73b83fdab
parent
7e2f16ba
7e2f16ba675cd90582c06bf18c83631bbdbd4111
+6
-24
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+1
package.json
+1
package.json
+5
-24
src/components/Packages.svelte
+5
-24
src/components/Packages.svelte
···
1
1
<script>
2
2
import * as Card from "$lib/components/ui/card";
3
3
import { Button } from "$lib/components/ui/button";
4
+
import { toast, Toaster } from 'svelte-sonner';
4
5
5
6
// Define the packages and their installers
6
7
const uv_tools = [
···
99
100
100
101
// Reactive variables for selected packages and copied state
101
102
let selectedPackages = $state(new Set(packages));
102
-
let copied = false;
103
103
104
104
// Toggle package selection
105
105
function togglePackage(pkg) {
···
175
175
// Copy the generated commands to clipboard
176
176
function copyToClipboard() {
177
177
navigator.clipboard.writeText(cmds);
178
-
showCopiedMessage();
179
-
}
180
-
181
-
// Show the "Copied!" message
182
-
function showCopiedMessage() {
183
-
copied = true;
184
-
setTimeout(() => (copied = false), 2000);
178
+
toast.success("Copied all commands to clipboard");
185
179
}
186
180
187
181
// Add new derived store to group commands by type
···
203
197
// Add new copy functions for each section
204
198
function copyInstallers() {
205
199
navigator.clipboard.writeText(groupedCommands.installers.join("\n"));
206
-
showCopiedMessage();
200
+
toast.success("Copied installer commands to clipboard");
207
201
}
208
202
209
203
function copyPackages() {
210
204
navigator.clipboard.writeText(groupedCommands.packages.join("\n"));
211
-
showCopiedMessage();
205
+
toast.success("Copied package commands to clipboard");
212
206
}
213
207
214
208
// Add select/deselect all function
···
228
222
</script>
229
223
230
224
<div class="container mx-auto p-4">
225
+
<Toaster />
231
226
<Card.Root>
232
227
<Card.Header>
233
228
<Card.Title>Package Selection</Card.Title>
···
295
290
<pre><code>{groupedCommands.packages.join("\n")}</code></pre>
296
291
</div>
297
292
{/if}
298
-
299
-
{#if copied}
300
-
<div class="copied-message">Copied!</div>
301
-
{/if}
302
293
</div>
303
294
</Card.Content>
304
295
</Card.Root>
···
359
350
padding: 0.5rem;
360
351
border-radius: 0.25rem;
361
352
cursor: pointer;
362
-
}
363
-
364
-
.copied-message {
365
-
position: absolute;
366
-
top: 0.5rem;
367
-
right: 5rem;
368
-
background-color: #198754;
369
-
color: #fff;
370
-
padding: 0.5rem;
371
-
border-radius: 0.25rem;
372
353
}
373
354
374
355
.terminal-output h4 {