extended-36

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-36.json`,
18  },
19  {
20    label: "npm",
21    code: `npx shadcn-vue@latest add ${siteUrl}/r/extended-36.json`,
22  },
23  {
24    label: "yarn",
25    code: `npx shadcn-vue@latest add ${siteUrl}/r/extended-36.json`,
26  },
27  {
28    label: "bun",
29    code: `bunx --bun shadcn-vue@latest add ${siteUrl}/r/extended-36.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="dark relative">
40    <Snippet v-model="activeTab" class="rounded-md border-0 bg-zinc-950 dark:bg-zinc-900">
41      <SnippetHeader class="border-0 bg-transparent p-0">
42        <SnippetTabsList
43          class="h-auto w-full justify-start rounded-none border-b bg-transparent px-4 py-0"
44        >
45          <SnippetTabsTrigger
46            v-for="command in commands"
47            :key="command.label"
48            :value="command.label"
49            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-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
50          >
51            {{ command.label }}
52          </SnippetTabsTrigger>
53        </SnippetTabsList>
54        <SnippetCopyButton
55          v-if="activeCommand"
56          :value="activeCommand.code"
57          class="text-muted-foreground absolute top-1 right-1 opacity-100"
58        />
59      </SnippetHeader>
60      <SnippetTabsContent v-for="command in commands" :key="command.label" :value="command.label">
61        <pre class="overflow-x-auto p-4 font-mono text-[12.8px] text-zinc-100">{{
62          command.code
63        }}</pre>
64      </SnippetTabsContent>
65    </Snippet>
66  </div>
67</template>