{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terminal",
  "type": "registry:component",
  "title": "Terminal",
  "description": "Terminal component for command line interfaces",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/chatcn/system/terminal.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  createContext,\n  useState,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype TerminalState = \"normal\" | \"minimize\" | \"maximize\";\n\ntype TerminalEntry = {\n  command: string;\n  output: React.ReactNode | string;\n};\n\ntype TerminalContextType = {\n  terminalState: TerminalState;\n  setTerminalState: React.Dispatch<React.SetStateAction<TerminalState>>;\n  terminalHistory: TerminalEntry[];\n  setTerminalHistory: React.Dispatch<React.SetStateAction<TerminalEntry[]>>;\n};\n\nconst TerminalContext = createContext<TerminalContextType>({\n  terminalState: \"normal\",\n  setTerminalState: () => {},\n  terminalHistory: [],\n  setTerminalHistory: () => {},\n});\n\ntype TerminalProviderProps = {\n  children: ReactNode;\n  initialState?: TerminalState;\n};\n\nexport function TerminalProvider({\n  children,\n  initialState = \"normal\",\n}: TerminalProviderProps) {\n  const [terminalState, setTerminalState] =\n    useState<TerminalState>(initialState);\n  const [terminalHistory, setTerminalHistory] = useState<TerminalEntry[]>([\n    {\n      command: \"help\",\n      output: (\n        <div>\n          <div>Available commands:</div>\n          <ul className=\"list-disc ml-6\">\n            <li>whoami</li>\n            <li>help</li>\n            <li>clear</li>\n          </ul>\n        </div>\n      ),\n    },\n  ]);\n\n  return (\n    <TerminalContext.Provider\n      value={{\n        terminalState,\n        setTerminalState,\n        terminalHistory,\n        setTerminalHistory,\n      }}\n    >\n      {children}\n    </TerminalContext.Provider>\n  );\n}\n\nexport function useTerminal() {\n  const context = useContext(TerminalContext);\n  if (!context) {\n    throw new Error(\"useTerminal must be used within a TerminalProvider\");\n  }\n  return context;\n}\n\ntype TerminalProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nfunction getTerminalPositionClasses(state: TerminalState): string {\n  switch (state) {\n    case \"maximize\":\n      return \"fixed inset-0 w-screen h-screen z-[9999] rounded-none text-sm\";\n    case \"minimize\":\n      return \"fixed bottom-3 left-1/2 -translate-x-1/2 h-auto z-[9999] cursor-pointer\";\n    case \"normal\":\n    default:\n      return \"relative h-auto\";\n  }\n}\n\nfunction getTerminalOutput(command: string): string | React.ReactNode {\n  const cmd = command.trim();\n  switch (cmd) {\n    case \"whoami\":\n      return (\n        <div>\n          Hi Im Sanku 21 year old dev I love{\" \"}\n          <span className=\"text-blue-500\">Development</span> and{\" \"}\n          <span className=\"text-blue-500\">Security</span>.\n        </div>\n      );\n    case \"help\":\n      return (\n        <div>\n          <div>Available commands:</div>\n          <ul className=\"list-disc ml-6\">\n            <li>whoami</li>\n            <li>help</li>\n            <li>clear</li>\n          </ul>\n        </div>\n      );\n    case \"clear\":\n      return \"CLEAR\";\n    default:\n      return \"Command not found!\";\n  }\n}\n\nexport function Terminal({ children, className }: TerminalProps) {\n  const { terminalState, setTerminalState } = useContext(TerminalContext);\n\n  const handleClick = () => {\n    if (terminalState === \"minimize\") {\n      setTerminalState(\"normal\");\n    }\n  };\n\n  const content = (\n    <div\n      onClick={handleClick}\n      className={cn(\n        \"flex flex-col border rounded overflow-auto transition-all\",\n        terminalState === \"maximize\" ? \"\" : className,\n        getTerminalPositionClasses(terminalState)\n      )}\n    >\n      {children}\n    </div>\n  );\n\n  if (terminalState === \"maximize\" || terminalState === \"minimize\") {\n    return createPortal(content, document.body);\n  }\n  return content;\n}\n\ntype TerminalHeaderProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function TerminalHeader({ children, className }: TerminalHeaderProps) {\n  return (\n    <header className={cn(\"p-3 bg-muted rounded rounded-b-none\", className)}>\n      {children}\n    </header>\n  );\n}\n\nexport function TerminalInput() {\n  const { setTerminalHistory } = useContext(TerminalContext);\n  const [inputValue, setInputValue] = useState<string>(\"\");\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\") {\n      const command = inputValue.trim();\n      const output = getTerminalOutput(command);\n\n      if (output === \"CLEAR\") {\n        setTerminalHistory([]);\n        setInputValue(\"\");\n        return;\n      }\n\n      setTerminalHistory((prev) => [\n        ...prev,\n        { command, output: command ? output : \"\" },\n      ]);\n      setInputValue(\"\");\n    }\n  };\n\n  return (\n    <input\n      onKeyDown={handleKeyDown}\n      onChange={(e) => setInputValue(e.target.value)}\n      value={inputValue}\n      className=\"flex-1 bg-transparent text-sm outline-none border-none caret-amber-300\"\n      type=\"text\"\n      autoFocus\n    />\n  );\n}\n\ntype TerminalPromptProps = {\n  children: React.ReactNode;\n  className?: string;\n};\nexport function TerminalPrompt({ children, className }: TerminalPromptProps) {\n  return <div className={cn(className)}>{children}</div>;\n}\n\ntype TerminalBodyProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function TerminalBody({ children, className }: TerminalBodyProps) {\n  const { terminalState } = useContext(TerminalContext);\n\n  if (terminalState === \"minimize\") {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"bg-muted rounded-none rounded-b p-3 overflow-y-auto\",\n        terminalState === \"maximize\" ? \"flex-1\" : className\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\ntype TerminalBodyContentProps = {\n  className?: string;\n  prompt?: ReactNode;\n};\n\nexport function TerminalBodyContent({\n  className,\n  prompt,\n}: TerminalBodyContentProps) {\n  const { terminalHistory } = useContext(TerminalContext);\n  const bottomRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, [terminalHistory]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {terminalHistory.map((entry, index) => (\n        <div key={index}>\n          <div className=\"flex gap-2\">\n            {prompt}\n            <span>{entry.command}</span>\n          </div>\n          {entry.output && entry.output !== \"CLEAR\" && (\n            <div className=\"text-sm\">{entry.output}</div>\n          )}\n        </div>\n      ))}\n      <div ref={bottomRef} />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}