"use client"; import React, { createContext, useContext, useState, useEffect } from "react"; import { Clipboard, SquareTerminal, Check } from "lucide-react"; import { Separator } from "@/components/ui/separator"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type CommandBlockContextType = { activeCommand: string; setActiveCommand: (cmd: string) => void; copied: boolean; setCopied: (copied: boolean) => void; }; const CommandBlockContext = createContext(null); export function useCommandBlockContext() { const context = useContext(CommandBlockContext); if (!context) { throw new Error( "useCommandBlockContext must be used within a CommandBlockContext.Provider" ); } return context; } type CommandBlockProps = { className?: string; children: React.ReactNode; }; export function CommandBlock({ className, children }: CommandBlockProps) { const [activeCommand, setActiveCommand] = useState(""); const [copied, setCopied] = useState(false); return (

{children}

); } type CommandBlockHeaderProps = { children?: React.ReactNode; }; export function CommandBlockHeader({ children }: CommandBlockHeaderProps) { const { activeCommand, copied, setCopied } = useCommandBlockContext(); const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error("Failed to copy text: ", err); } }; return ( <>

{children}

{copied ? "Copied!" : "Copy to Clipboard"}

); } interface CommandBlockTitleProps { children: string; showTerminalIcon?: boolean; } export function CommandBlockTitle({ children, showTerminalIcon = true, }: CommandBlockTitleProps) { if (!children && !showTerminalIcon) return null; return (

{showTerminalIcon && ( )} {children && ( {children} )}

); } type CommandBlockContentProps = { className?: string; command: string; }; export function CommandBlockContent({ className, command, }: CommandBlockContentProps) { const { setActiveCommand } = useCommandBlockContext(); useEffect(() => { setActiveCommand(command); }, [command, setActiveCommand]); return (

{command}

); } type CommandBlockTabHeaderProps = { children: React.ReactNode; showTerminalIcon?: boolean; }; export function CommandBlockTabHeader({ children, showTerminalIcon = true, }: CommandBlockTabHeaderProps) { const { activeCommand, copied, setCopied } = useCommandBlockContext(); const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error("Failed to copy text: ", err); } }; return ( <>

{showTerminalIcon && ( )}

{children}

{copied ? "Copied!" : "Copy to Clipboard"}

); } type CommandBlockTabTriggerProps = { value: string; label: string; }; export function CommandBlockTabTrigger({ value, label, }: CommandBlockTabTriggerProps) { return ( {label} ); } type CommandBlocksTabsProps = { children: React.ReactNode; defaultValue?: string; }; export function CommandBlocksTabs({ children, defaultValue, }: CommandBlocksTabsProps) { const [activeTab, setActiveTab] = useState(defaultValue || ""); return ( {children} ); } type CommandBlockTabContentProps = { value: string; command: string; }; export function CommandBlockTabContent({ value, command, }: CommandBlockTabContentProps) { const { setActiveCommand } = useCommandBlockContext(); useEffect(() => { const handle = () => setActiveCommand(command); handle(); }, [command, setActiveCommand]); return (

{command}

); }

Command Tabs

Examples

Installation