extended-35

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 commands = [
13  {
14    label: "npm",
15    code: "npx next-forge@latest init",
16  },
17  {
18    label: "yarn",
19    code: "yarn dlx next-forge@latest init",
20  },
21  {
22    label: "pnpm",
23    code: "pnpx next-forge@latest init",
24  },
25  {
26    label: "bun",
27    code: "bunx next-forge@latest init",
28  },
29] as const;
30 
31const activeTab = ref(commands[0]?.label);
32 
33const activeCommand = computed(() => commands.find((command) => command.label === activeTab.value));
34</script>
35 
36<template>
37  <div class="*:not-first:mt-2">
38    <Snippet v-model="activeTab">
39      <SnippetHeader>
40        <SnippetTabsList>
41          <SnippetTabsTrigger
42            v-for="command in commands"
43            :key="command.label"
44            :value="command.label"
45          >
46            {{ command.label }}
47          </SnippetTabsTrigger>
48        </SnippetTabsList>
49        <SnippetCopyButton :value="activeCommand?.code || ''" />
50      </SnippetHeader>
51      <SnippetTabsContent v-for="command in commands" :key="command.label" :value="command.label">
52        <pre class="truncate p-4">{{ command.code }}</pre>
53      </SnippetTabsContent>
54    </Snippet>
55    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
56      Based on Kibo Snippet component
57      <a
58        class="hover:text-foreground underline"
59        href="https://www.kibo-ui.com/components/snippet"
60        target="_blank"
61        rel="noopener nofollow"
62      >
63        Kibo UI
64      </a>
65    </p>
66  </div>
67</template>