✨ Refactor setup registry component and update documentation for shadcn/ui integration

src/components/svgs/copyShadcnCommand.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { Button } from "@/components/ui/button";
+  import { buttonVariants } from "@/components/ui/button";
   import Shadcn from "@/components/logos/shadcn.svelte";
   import SelectPkgManager from "@/components/selectPkgManager.svelte";
 
   import { pkgManager, type PackageManager } from "@/stores/pkgManager.store";
   import CodeBlock from "@/components/codeBlock.svelte";
-  import SetupShadcnRegistry from "@/components/svgs/setupShadcnRegistry.svelte";
+  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
 
   interface Props {
     svgTitle: string;
@@ -29,11 +29,17 @@
 </script>
 
 <div class="flex items-center justify-between space-x-2">
-  <SetupShadcnRegistry>
-    <Button variant="outline" size="sm">
-      <span>Setup Registry</span>
-    </Button>
-  </SetupShadcnRegistry>
+  <a
+    href="/docs/shadcn-ui"
+    target="_blank"
+    class={buttonVariants({ variant: "outline", size: "sm" })}
+  >
+    <span>Setup Registry</span>
+    <ArrowUpRightIcon
+      size={14}
+      class="text-neutral-500 dark:text-neutral-400"
+    />
+  </a>
   <SelectPkgManager />
 </div>
 <CodeBlock code={`${shadcnCommand} @svgl/${svgFormatTitle}`} Icon={Shadcn} />

src/components/svgs/setupShadcnRegistry.svelte

@@ -1,38 +0,0 @@
-<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>