Package Manager Command

1"use client";
2
3import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
4import { Button } from "./button";
5import { CheckIcon, ClipboardIcon, TerminalIcon } from "lucide-react";
6import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
7import { useState } from "react";
8import { cn } from "@/lib/utils";
9
10export type PackageManager = "npm" | "yarn" | "pnpm" | "bun";
11
12const PACKAGE_MANAGERS: PackageManager[] = ["npm", "yarn", "pnpm", "bun"];
13
14function BashCommand({ command }: { command: string }) {
15  return (
16    <pre>
17      <code
18        className="relative font-mono text-sm leading-none before:mr-2 before:text-muted-foreground before:content-['$']"
19        data-language="bash"
20      >
21        {command}
22      </code>
23    </pre>
24  );
25}
26
27export function PackageManagerCommand({
28  getCommand,
29  className,
30}: {
31  getCommand(packageManager: PackageManager): string;
32  className?: string;
33}) {
34  const [packageManager, setPackageManager] = useState<PackageManager>("npm");
35  const [copied, setCopied] = useState(false);
36  const command = getCommand(packageManager);
37
38  const copyCommand = () => {
39    navigator.clipboard.writeText(command);
40    setCopied(true);
41    setTimeout(() => setCopied(false), 2000);
42  };
43
44  return (
45    <div className={cn("overflow-x-auto relative w-full border rounded-md", className)}>
46      <Tabs
47        value={packageManager}
48        onValueChange={(val) => setPackageManager(val as PackageManager)}
49        className="gap-0"
50      >
51        <div className="border-border/50 flex items-center gap-2 border-b px-2 py-1">
52          <div className="flex size-4 items-center justify-center rounded-[1px] opacity-70">
53            <TerminalIcon />
54          </div>
55          <TabsList className="rounded-none bg-transparent p-0">
56            <TabsTrigger
57              value="npm"
58              className="data-[state=active]:bg-accent data-[state=active]:border-input h-7 border border-transparent pt-0.5 data-[state=active]:shadow-none"
59            >
60              npm
61            </TabsTrigger>
62            <TabsTrigger
63              value="yarn"
64              className="data-[state=active]:bg-accent data-[state=active]:border-input h-7 border border-transparent pt-0.5 data-[state=active]:shadow-none"
65            >
66              yarn
67            </TabsTrigger>
68            <TabsTrigger
69              value="pnpm"
70// … truncated