import { cn } from "@/lib/utils"; import { createContext, useState, ReactNode, useContext, useEffect, useRef, } from "react"; import { createPortal } from "react-dom"; type TerminalState = "normal" | "minimize" | "maximize"; type TerminalEntry = { command: string; output: React.ReactNode | string; }; type TerminalContextType = { terminalState: TerminalState; setTerminalState: React.Dispatch>; terminalHistory: TerminalEntry[]; setTerminalHistory: React.Dispatch>; }; const TerminalContext = createContext({ terminalState: "normal", setTerminalState: () => {}, terminalHistory: [], setTerminalHistory: () => {}, }); type TerminalProviderProps = { children: ReactNode; initialState?: TerminalState; }; export function TerminalProvider({ children, initialState = "normal", }: TerminalProviderProps) { const [terminalState, setTerminalState] = useState(initialState); const [terminalHistory, setTerminalHistory] = useState([ { command: "help", output: (

Available commands:

whoami
help
clear

), }, ]); return ( {children} ); } export function useTerminal() { const context = useContext(TerminalContext); if (!context) { throw new Error("useTerminal must be used within a TerminalProvider"); } return context; } type TerminalProps = { children: ReactNode; className?: string; }; function getTerminalPositionClasses(state: TerminalState): string { switch (state) { case "maximize": return "fixed inset-0 w-screen h-screen z-[9999] rounded-none text-sm"; case "minimize": return "fixed bottom-3 left-1/2 -translate-x-1/2 h-auto z-[9999] cursor-pointer"; case "normal": default: return "relative h-auto"; } } function getTerminalOutput(command: string): string | React.ReactNode { const cmd = command.trim(); switch (cmd) { case "whoami": return (

Hi Im Sanku 21 year old dev I love{" "} Development and{" "} Security.

); case "help": return (

Available commands:

whoami
help
clear

); case "clear": return "CLEAR"; default: return "Command not found!"; } } export function Terminal({ children, className }: TerminalProps) { const { terminalState, setTerminalState } = useContext(TerminalContext); const handleClick = () => { if (terminalState === "minimize") { setTerminalState("normal"); } }; const content = (

{children}

); if (terminalState === "maximize" || terminalState === "minimize") { return createPortal(content, document.body); } return content; } type TerminalHeaderProps = { children: ReactNode; className?: string; }; export function TerminalHeader({ children, className }: TerminalHeaderProps) { return (

{children}

); } export function TerminalInput() { const { setTerminalHistory } = useContext(TerminalContext); const [inputValue, setInputValue] = useState(""); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter") { const command = inputValue.trim(); const output = getTerminalOutput(command); if (output === "CLEAR") { setTerminalHistory([]); setInputValue(""); return; } setTerminalHistory((prev) => [ ...prev, { command, output: command ? output : "" }, ]); setInputValue(""); } }; return ( setInputValue(e.target.value)} value={inputValue} className="flex-1 bg-transparent text-sm outline-none border-none caret-amber-300" type="text" autoFocus /> ); } type TerminalPromptProps = { children: React.ReactNode; className?: string; }; export function TerminalPrompt({ children, className }: TerminalPromptProps) { return

{children}

; } type TerminalBodyProps = { children: ReactNode; className?: string; }; export function TerminalBody({ children, className }: TerminalBodyProps) { const { terminalState } = useContext(TerminalContext); if (terminalState === "minimize") { return null; } return (

{children}

); } type TerminalBodyContentProps = { className?: string; prompt?: ReactNode; }; export function TerminalBodyContent({ className, prompt, }: TerminalBodyContentProps) { const { terminalHistory } = useContext(TerminalContext); const bottomRef = useRef(null); useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [terminalHistory]); return (

{terminalHistory.map((entry, index) => (

{prompt} {entry.command}

{entry.output && entry.output !== "CLEAR" && (

{entry.output}

)}

))}

); }

Terminal

Examples

Installation