Terminal

1import { cn } from "@/lib/utils";
2import {
3  createContext,
4  useState,
5  ReactNode,
6  useContext,
7  useEffect,
8  useRef,
9} from "react";
10import { createPortal } from "react-dom";
11 
12type TerminalState = "normal" | "minimize" | "maximize";
13 
14type TerminalEntry = {
15  command: string;
16  output: React.ReactNode | string;
17};
18 
19type TerminalContextType = {
20  terminalState: TerminalState;
21  setTerminalState: React.Dispatch<React.SetStateAction<TerminalState>>;
22  terminalHistory: TerminalEntry[];
23  setTerminalHistory: React.Dispatch<React.SetStateAction<TerminalEntry[]>>;
24};
25 
26const TerminalContext = createContext<TerminalContextType>({
27  terminalState: "normal",
28  setTerminalState: () => {},
29  terminalHistory: [],
30  setTerminalHistory: () => {},
31});
32 
33type TerminalProviderProps = {
34  children: ReactNode;
35  initialState?: TerminalState;
36};
37 
38export function TerminalProvider({
39  children,
40  initialState = "normal",
41}: TerminalProviderProps) {
42  const [terminalState, setTerminalState] =
43    useState<TerminalState>(initialState);
44  const [terminalHistory, setTerminalHistory] = useState<TerminalEntry[]>([
45    {
46      command: "help",
47      output: (
48        <div>
49          <div>Available commands:</div>
50          <ul className="list-disc ml-6">
51            <li>whoami</li>
52            <li>help</li>
53            <li>clear</li>
54          </ul>
55        </div>
56      ),
57    },
58  ]);
59 
60  return (
61    <TerminalContext.Provider
62      value={{
63        terminalState,
64        setTerminalState,
65        terminalHistory,
66        setTerminalHistory,
67      }}
68    >
69      {children}
70    </TerminalContext.Provider>
71  );
72}
73 
74export function useTerminal() {
75  const context = useContext(TerminalContext);
76  if (!context) {
77    throw new Error("useTerminal must be used within a TerminalProvider");
78  }
79  return context;
80}
81 
82type TerminalProps = {
83  children: ReactNode;
84  className?: string;
85};
86 
87function getTerminalPositionClasses(state: TerminalState): string {
88  switch (state) {
89    case "maximize":
90      return "fixed inset-0 w-screen h-screen z-[9999] rounded-none text-sm";
91    case "minimize":
92      return "fixed bottom-3 left-1/2 -translate-x-1/2 h-auto z-[9999] cursor-pointer";
93    case "normal":
94    default:
95      return "relative h-auto";
96  }
97}
98 
99function getTerminalOutput(command: string): string | React.ReactNode {
100  const cmd = command.trim();
101  switch (cmd) {
102    case "whoami":
103      return (
104        <div>
105          Hi Im Sanku 21 year old dev I love{" "}
106// … truncated