Command Tabs

1"use client";
2import { useState, useEffect } from "react";
3import {
4  Copy01Icon,
5  ComputerTerminal01Icon,
6  Tick01Icon,
7} from "@hugeicons/core-free-icons";
8import { HugeiconsIcon } from "@hugeicons/react";
9import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
10import { Separator } from "@/components/ui/separator";
11import {
12  Tooltip,
13  TooltipContent,
14  TooltipTrigger,
15} from "@/components/ui/tooltip";
16import { Button } from "@/components/ui/button";
17import { cn } from "@/lib/utils";
18 
19const PACKAGE_MANAGER_STORAGE_KEY = "chatcn-preferred-package-manager";
20 
21interface CommandItem {
22  label: string;
23  command: string;
24}
25 
26export interface CommandBlockProps {
27  title?: string;
28  command?: string;
29  commands?: CommandItem[];
30  defaultValue?: string;
31  showTerminalIcon?: boolean;
32  className?: string;
33}
34 
35function SingleCommandBlock({
36  title,
37  command,
38  showTerminalIcon = true,
39  className,
40}: {
41  title?: string;
42  command: string;
43  showTerminalIcon?: boolean;
44  className?: string;
45}) {
46  const [copied, setCopied] = useState(false);
47 
48  const copyToClipboard = async (text: string) => {
49    try {
50      await navigator.clipboard.writeText(text);
51      setCopied(true);
52      setTimeout(() => setCopied(false), 2000);
53    } catch (err) {
54      console.error("Failed to copy text: ", err);
55    }
56  };
57 
58  return (
59    <div className={cn("w-full mx-auto", className)}>
60      <div className="bg-card rounded-md border">
61        {(title || showTerminalIcon) && (
62          <>
63            <div className="flex items-center justify-between px-3 px-sm-4 py-1.5 py-sm-2">
64              <div className="flex items-center space-x-2">
65                {showTerminalIcon && (
66                  <HugeiconsIcon
67                    icon={ComputerTerminal01Icon}
68                    className="text-muted-foreground size-4 sm:size-5"
69                  />
70                )}
71                {title && (
72                  <span className="font-medium text-sm sm:text-base">
73                    {title}
74                  </span>
75                )}
76              </div>
77              <Tooltip>
78                <TooltipTrigger asChild>
79                  <Button
80                    variant="ghost"
81                    size="sm"
82                    className="h-7 w-7 sm:h-8 sm:w-8 p-0"
83                    onClick={() => copyToClipboard(command)}
84                  >
85                    {copied ? (
86                      <HugeiconsIcon
87                        icon={Tick01Icon}
88// … truncated