🛠️ Create codeBlock UI component + setup shadcn/ui registry

src/components/svgs/setupShadcnRegistry.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import * as Dialog from "@/components/ui/dialog";
+  import CodeBlock from "@/components/codeBlock.svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
+
+  let registryCode = `
+  "registries": {
+    "@svgl": "https://svgl.app/r/{name}.json"
+  }
+`;
+</script>
+
+<Dialog.Root>
+  <Dialog.Trigger>
+    {@render children?.()}
+  </Dialog.Trigger>
+  <Dialog.Content class="text-sm">
+    <Dialog.Header>
+      <Dialog.Title>Setup shadcn/ui registry</Dialog.Title>
+      <Dialog.Description>
+        Use the code below to configure the @svgl registry for your project.
+      </Dialog.Description>
+    </Dialog.Header>
+    <p>
+      1. Copy and paste the code into
+      <span class="font-mono">components.json</span>:
+    </p>
+    <CodeBlock code={registryCode} />
+    <p class="mt-2">2. Then use the following command to add SVGs:</p>
+    <CodeBlock code={`npx shadcn@latest add @svgl/[svg-name]`} />
+  </Dialog.Content>
+</Dialog.Root>