shadcn/app/public/registry/styles/default/terminal-demo.json

{
  "name": "terminal-demo",
  "registryDependencies": [
    "terminal"
  ],
  "files": [
    {
      "name": "terminal-demo.tsx",
      "content": "\"use client\"\n\nimport { Terminal } from \"@/registry/default/ui/terminal\"\n\nexport default function TerminalDemo() {\n  const handleCommand = async (command: string) => {\n    // Simulate async command processing\n    await new Promise((resolve) => setTimeout(resolve, 500))\n\n    const [cmd, ...args] = command.toLowerCase().split(\" \")\n\n    switch (cmd) {\n      case \"about\":\n        return (\n          <div className=\"space-y-1\">\n            <div>Terminal Component v1.0.0</div>\n            <div className=\"text-muted-foreground\">\n              A feature-rich terminal emulator with syntax highlighting and\n              auto-completion.\n            </div>\n          </div>\n        )\n\n      case \"ls\":\n        return (\n          <div className=\"grid grid-cols-3 gap-4\">\n            <span>Documents</span>\n            <span>Downloads</span>\n            <span>Desktop</span>\n            <span>Pictures</span>\n            <span>Videos</span>\n            <span>Music</span>\n          </div>\n        )\n\n      case \"pwd\":\n        return \"/home/user\"\n\n      case \"whoami\":\n        return \"guest\"\n\n      case \"calc\":\n        if (args.length === 0) {\n          return \"Usage: calc <expression>\"\n        }\n        try {\n          const result = eval(args.join(\" \"))\n          return `= ${result}`\n        } catch {\n          return \"Error: Invalid expression\"\n        }\n\n      case \"weather\":\n        return (\n          <div className=\"space-y-1\">\n            <div>Current Weather:</div>\n            <div className=\"ml-4\">\n              <div>Temperature: 72°F</div>\n              <div>Condition: Partly Cloudy</div>\n              <div>Humidity: 65%</div>\n              <div>Wind: 5 mph</div>\n            </div>\n          </div>\n        )\n\n      case \"time\":\n        return new Date().toLocaleTimeString()\n\n      case \"date\":\n        return new Date().toLocaleDateString()\n\n      default:\n        return `Command not found: ${cmd}. Type 'help' for available commands.`\n    }\n  }\n\n  const initialCommands = [\n    {\n      id: \"welcome\",\n      input: \"echo Welcome to the Terminal Component\",\n      output: \"Welcome to the Terminal Component\",\n      timestamp: new Date(),\n      type: \"success\" as const,\n    },\n    {\n      id: \"hint\",\n      input: \"echo Type 'help' to see available commands\",\n      output: \"Type 'help' to see available commands\",\n      timestamp: new Date(),\n      type: \"info\" as const,\n    },\n  ]\n\n  return (\n    <div className=\"w-full\">\n      <Terminal\n        prompt=\"$\"\n        initialCommands={initialCommands}\n        onCommand={handleCommand}\n        theme=\"dark\"\n        autoCompleteCommands={[\n          \"help\",\n          \"clear\",\n          \"echo\",\n          \"date\",\n          \"time\",\n          \"about\",\n          \"ls\",\n          \"pwd\",\n          \"whoami\",\n          \"calc\",\n          \"weather\",\n        ]}\n      />\n    </div>\n  )\n}\n"
    }
  ],
  "type": "components:example"
}