extended-37

1<script setup lang="ts">
2import {
3  Snippet,
4  SnippetCopyButton,
5  SnippetHeader,
6  SnippetTabsContent,
7  SnippetTabsList,
8  SnippetTabsTrigger,
9} from "@/registry/default/ui/snippet";
10import { computed, ref } from "vue";
11 
12const siteUrl = "https://www.originui-vue.com";
13 
14const commands = [
15  {
16    label: "pnpm",
17    code: `pnpm dlx shadcn-vue@latest add ${siteUrl}/r/extended-37.json`,
18  },
19  {
20    label: "npm",
21    code: `npx shadcn-vue@latest add ${siteUrl}/r/extended-37.json`,
22  },
23  {
24    label: "yarn",
25    code: `npx shadcn-vue@latest add ${siteUrl}/r/extended-37.json`,
26  },
27  {
28    label: "bun",
29    code: `bunx --bun shadcn-vue@latest add ${siteUrl}/r/extended-37.json`,
30  },
31] as const;
32 
33const activeTab = ref(commands[0]?.label);
34 
35const activeCommand = computed(() => commands.find((command) => command.label === activeTab.value));
36</script>
37 
38<template>
39  <div class="relative">
40    <Snippet v-model="activeTab" class="rounded-xl">
41      <SnippetHeader class="p-0">
42        <SnippetTabsList class="bg-transparent">
43          <SnippetTabsTrigger
44            v-for="command in commands"
45            :key="command.label"
46            :value="command.label"
47            class="data-[state=active]:after:bg-primary data-[state=active]:text-foreground hover:text-muted-foreground relative rounded-none py-3 after:absolute after:inset-x-0 after:bottom-0 after:h-px data-[state=active]:bg-transparent data-[state=active]:shadow-none"
48          >
49            {{ command.label }}
50          </SnippetTabsTrigger>
51        </SnippetTabsList>
52        <SnippetCopyButton v-if="activeCommand" :value="activeCommand.code" />
53      </SnippetHeader>
54      <SnippetTabsContent
55        v-for="command in commands"
56        :key="command.label"
57        :value="command.label"
58        class="bg-muted p-2"
59      >
60        <div class="bg-background rounded-md shadow-sm">
61          <pre class="overflow-x-auto p-4 font-mono">{{ command.code }}</pre>
62        </div>
63      </SnippetTabsContent>
64    </Snippet>
65  </div>
66</template>