import { useState } from 'react'; export const Terminal = ({ children }) => { /* Future potential enhancement: Support non-text children! */ const lines = children.trim().split('\n'); const [hoveredIndex, setHoveredIndex] = useState(null); const [copiedIndex, setCopiedIndex] = useState(null); const copyToClipboard = (text, index) => { navigator.clipboard .writeText(text.trim().slice(1).trim()) .then(() => { setCopiedIndex(index); setTimeout(() => setCopiedIndex(null), 500); // Reset after 1 second }) .catch((err) => { console.error('Failed to copy:', err); }); }; return (

{/* Terminal Buttons */}

{/* Terminal Content */}

{lines.map((line, index) => { const isInput = line.trim().startsWith('$'); const content = isInput ? line.trim().slice(1).trim() : line.trim(); return (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} > {isInput && ( )} {' '} {content} {isInput && (hoveredIndex === index || copiedIndex === index) && ( copyToClipboard(line, index)} onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && copyToClipboard(line, index)} role="button" tabIndex={0} > )}

); })}

); }; {` $ npx run command This is the response $ inputs start with a dollar sign outputs start with no prefix and can be multiline `}