"use client"; import React, { useState } from "react"; import { Clipboard, SquareTerminal, Check } from "lucide-react"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Separator } from "@/components/ui/separator"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface CommandItem { label: string; command: string; } export interface CommandBlockProps { title?: string; command?: string; commands?: CommandItem[]; defaultValue?: string; showTerminalIcon?: boolean; className?: string; } function SingleCommandBlock({ title, command, showTerminalIcon = true, className, }: { title?: string; command: string; showTerminalIcon?: boolean; className?: string; }) { const [copied, setCopied] = useState(false); 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 (

{(title || showTerminalIcon) && ( <>

{showTerminalIcon && ( )} {title && ( {title} )}

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

)}

{command}

); } function MultiCommandBlock({ commands, defaultValue, showTerminalIcon = true, className, }: { commands: CommandItem[]; defaultValue?: string; showTerminalIcon?: boolean; className?: string; }) { const [copied, setCopied] = useState(false); const [activeTab, setActiveTab] = useState( defaultValue || commands[0]?.label ); 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); } }; const activeCommand = commands.find((cmd) => cmd.label === activeTab)?.command || ""; return (

{showTerminalIcon && ( )}

{commands.map((tab) => ( {tab.label} ))}

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

{commands.map((tab) => (

{tab.command}

))}

); } export default function CommandBlock(props: CommandBlockProps) { const { command, commands, ...rest } = props; if (command) { return ; } if (commands && commands.length > 0) { return ; } return null; }

Command Tabs

Examples

Installation