feat: new UUID component

Author: Torwent

src/lib/components/UUID.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Clipboard from "@lucide/svelte/icons/clipboard"
+	import ClipboardCheck from "@lucide/svelte/icons/clipboard-check"
+	let { uuid }: { uuid: string } = $props()
+	let copied = $state(false)
+	console.log(uuid)
+</script>
+
+<button
+	class="mx-auto btn cursor-pointer rounded-md preset-outlined-surface-500 p-2 text-xs"
+	type="button"
+	onclick={async (e) => {
+		e.preventDefault()
+		await navigator.clipboard.writeText(uuid)
+		copied = true
+		setTimeout(() => (copied = false), 2000)
+	}}
+>
+	ID: <span class="w-18 truncate">{uuid}</span>
+	{#if copied}
+		<ClipboardCheck class="h-4" />
+	{:else}
+		<Clipboard class="h-4" />
+	{/if}
+</button>

src/routes/dashboard/[slug]/+layout.svelte

@@ -7,6 +7,7 @@
 	import Landmark from "@lucide/svelte/icons/landmark"
 	import Package from "@lucide/svelte/icons/package"
 	import Settings from "@lucide/svelte/icons/settings"
+	import UUID from "$lib/components/UUID.svelte"
 
 	const { data, children } = $props()
 
@@ -26,7 +27,7 @@
 		<span class="my-auto">
 			{data.scripter.profiles.username}
 		</span>
-		<small class="my-auto">{data.scripter.id}</small>
+		<small class="my-auto"><UUID uuid={data.scripter.id}></UUID></small>
 	</h3>
 
 	<div class="my-8 grid place-items-center">

src/routes/scripts/ScriptHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import UUID from "$lib/components/UUID.svelte"
 	import StatsHeader from "./StatsHeader.svelte"
 
 	const data = $props()
@@ -28,7 +29,7 @@
 			{description ?? "Loading..."}
 		</h2>
 		<h3 class="my-4">
-			{id ?? "Loading..."}
+			<UUID uuid={id ?? "Loading..."}></UUID>
 		</h3>
 		<StatsHeader {id} />
 	</div>

src/routes/user/[slug]/+page.svelte

@@ -4,6 +4,7 @@
 	import { zodClient } from "sveltekit-superforms/adapters"
 	import Head from "$lib/components/Head.svelte"
 	import { superForm } from "sveltekit-superforms"
+	import UUID from "$lib/components/UUID.svelte"
 
 	const { data, form } = $props()
 	const profile = $derived(data.profile!)
@@ -30,7 +31,7 @@
 <main class="container mx-auto my-6 flex max-w-3xl flex-col">
 	<header class="my-24 flex flex-col">
 		<h1 class="mx-auto my-2 text-3xl font-bold">Username: {profile.username}</h1>
-		<h2 class="mx-auto my-8 leading-normal font-semibold">ID: {profile.id}</h2>
+		<UUID uuid={profile.id}></UUID>
 	</header>
 
 	<RoleBadge />