> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withampersand.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Terminal example

This is an example of a Terminal component that can be used in other pages. This page isn't discoverable in the table of contents (since it is not in `generate-docs.ts` or `docs.json`), but it is available at docs.withampersand.com/terminal-example (or [http://localhost:3000/terminal-example](http://localhost:3000/terminal-example) when previewing locally).

export const Terminal = ({copyText, command, output}) => {
  const copyCommand = async () => {
    await navigator.clipboard.writeText(copyText);
  };
  let commandComponent = <div className="flex items-start px-3 py-2">
      <span className="text-green-400 pr-2">$</span>
      <span className="flex-1 break-words whitespace-pre-wrap">{command}</span>
      <button onClick={copyCommand} className="ml-2 text-gray-400 hover:text-white text-xs" title="Copy command">Copy</button>
    </div>;
  let outputComponent = <div className="px-3 py-2 text-sm whitespace-pre-wrap overflow-x-auto bg-gray-950 rounded-md font-mono">
      {output}
    </div>;
  return <div className="terminal bg-gray-900 text-gray-100 font-mono text-sm rounded-md border border-gray-800 max-w-3xl mx-auto">
      {commandComponent}
      {outputComponent}
    </div>;
};

<Terminal
  copyText="git clone my-repo ./tmp"
  command={
<>
  git clone <span className="text-blue-400">my-repo</span> ./tmp
</>
}
  output={
<>
  added 2 packages, and audited 123 packages in 2s{"\n"}
  found <span className="text-green-400">0</span> vulnerabilities
</>
}
/>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.