✨ Add open with v0 support

src/components/logos/v0.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { IconProps } from "@/types/icon";
+
+  let props: IconProps = $props();
+</script>
+
+<svg
+  stroke-linejoin="round"
+  viewBox="0 0 16 16"
+  width={props.size}
+  height={props.size}
+>
+  <path
+    clip-rule="evenodd"
+    d="M9.50321 5.5H13.2532C13.3123 5.5 13.3704 5.5041 13.4273 5.51203L9.51242 9.42692C9.50424 9.36912 9.5 9.31006 9.5 9.25L9.5 5.5L8 5.5L8 9.25C8 10.7688 9.23122 12 10.75 12H14.5V10.5L10.75 10.5C10.6899 10.5 10.6309 10.4958 10.5731 10.4876L14.4904 6.57028C14.4988 6.62897 14.5032 6.68897 14.5032 6.75V10.5H16.0032V6.75C16.0032 5.23122 14.772 4 13.2532 4H9.50321V5.5ZM0 5V5.00405L5.12525 11.5307C5.74119 12.3151 7.00106 11.8795 7.00106 10.8822V5H5.50106V9.58056L1.90404 5H0Z"
+    fill="currentColor"
+    fill-rule="evenodd"
+  />
+</svg>

src/components/svgs/copyShadcnCommand.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
-  import { buttonVariants } from "@/components/ui/button";
+  import { globals } from "@/globals";
-  import Shadcn from "@/components/logos/shadcn.svelte";
 
-  import { settingsStore, type PackageManager } from "@/stores/settings.store";
+  import { buttonVariants } from "@/components/ui/button";
   import CodeBlock from "@/components/codeBlock.svelte";
   import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
 
+  import { settingsStore, type PackageManager } from "@/stores/settings.store";
+
+  import V0 from "@/components/logos/v0.svelte";
+  import Shadcn from "@/components/logos/shadcn.svelte";
+
   interface Props {
     svgTitle: string;
   }
@@ -27,11 +31,11 @@
     .replace(/[^a-z0-9-]/g, "");
 </script>
 
-<div class="flex items-center justify-between space-x-2">
+<div class="flex w-full items-center space-x-2">
   <a
-    href="/docs/shadcn-ui"
     target="_blank"
-    class={buttonVariants({ variant: "outline", size: "sm" })}
+    href="/docs/shadcn-ui"
+    class={buttonVariants({ variant: "outline", class: "w-full" })}
   >
     <span>Setup Registry</span>
     <ArrowUpRightIcon
@@ -39,5 +43,17 @@
       class="text-neutral-500 dark:text-neutral-400"
     />
   </a>
+  <a
+    target="_blank"
+    href={`${globals.v0Url}${globals.registryUrl}${svgFormatTitle}.json`}
+    class={buttonVariants({ variant: "outline", class: "w-full" })}
+  >
+    <span>Open with</span>
+    <V0 size={20} />
+    <ArrowUpRightIcon
+      size={14}
+      class="text-neutral-500 dark:text-neutral-400"
+    />
+  </a>
 </div>
 <CodeBlock code={`${shadcnCommand} @svgl/${svgFormatTitle}`} Icon={Shadcn} />

src/globals.ts

@@ -9,4 +9,6 @@ export const globals = {
     "https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started",
   requestSvgUrl:
     "https://github.com/pheralb/svgl/issues/new?template=request-svg.yml",
+  registryUrl: "https://svgl.app/r/",
+  v0Url: "https://v0.dev/chat/api/open?url=",
 };