Command Block

1"use client";
2import React, { createContext, useContext, useState, useEffect } from "react";
3import {
4  Copy01Icon,
5  ComputerTerminal01Icon,
6  Tick01Icon,
7} from "@hugeicons/core-free-icons";
8import { HugeiconsIcon } from "@hugeicons/react";
9import { Separator } from "@/components/ui/separator";
10import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
11import {
12  Tooltip,
13  TooltipContent,
14  TooltipTrigger,
15} from "@/components/ui/tooltip";
16import { Button } from "@/components/ui/button";
17import { cn } from "@/lib/utils";
18 
19type CommandBlockContextType = {
20  activeCommand: string;
21  setActiveCommand: (cmd: string) => void;
22  copied: boolean;
23  setCopied: (copied: boolean) => void;
24};
25 
26const CommandBlockContext = createContext<CommandBlockContextType | null>(null);
27 
28export function useCommandBlockContext() {
29  const context = useContext(CommandBlockContext);
30  if (!context) {
31    throw new Error(
32      "useCommandBlockContext must be used within a CommandBlockContext.Provider"
33    );
34  }
35  return context;
36}
37 
38type CommandBlockProps = {
39  className?: string;
40  children: React.ReactNode;
41};
42 
43export function CommandBlock({ className, children }: CommandBlockProps) {
44  const [activeCommand, setActiveCommand] = useState("");
45  const [copied, setCopied] = useState(false);
46 
47  return (
48    <CommandBlockContext.Provider
49      value={{ activeCommand, setActiveCommand, copied, setCopied }}
50    >
51      <div className={cn("w-full mx-auto", className)}>
52        <div className="bg-card rounded-md border">{children}</div>
53      </div>
54    </CommandBlockContext.Provider>
55  );
56}
57 
58type CommandBlockHeaderProps = {
59  children?: React.ReactNode;
60};
61 
62export function CommandBlockHeader({ children }: CommandBlockHeaderProps) {
63  const { activeCommand, copied, setCopied } = useCommandBlockContext();
64 
65  const copyToClipboard = async (text: string) => {
66    try {
67      await navigator.clipboard.writeText(text);
68      setCopied(true);
69      setTimeout(() => setCopied(false), 2000);
70    } catch (err) {
71      console.error("Failed to copy text: ", err);
72    }
73  };
74 
75  return (
76    <>
77      <div className="flex items-center justify-between px-3 sm:px-4 py-1.5 sm:py-2">
78        <div className="flex items-center space-x-2">{children}</div>
79        <Tooltip>
80          <TooltipTrigger asChild>
81            <Button
82              variant="ghost"
83              size="sm"
84              className="h-7 w-7 sm:h-8 sm:w-8 p-0"
85// … truncated