Console.tsxā¢1.61 kB
import React, { useEffect, useRef } from 'react';
interface ConsoleProps {
output: string[];
onClear: () => void;
}
const Console: React.FC<ConsoleProps> = ({ output, onClear }) => {
const bodyRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (bodyRef.current) {
bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
}
}, [output]);
return (
<div style={styles.console}>
<div style={styles.header}>
<span>CONSOLE</span>
<button onClick={onClear} style={styles.clearButton}>Clear</button>
</div>
<div style={styles.body} ref={bodyRef}>
<pre style={styles.pre}>{output.join('\n')}</pre>
</div>
</div>
);
};
const styles: { [key: string]: React.CSSProperties } = {
console: {
height: '100%',
display: 'flex',
flexDirection: 'column',
fontFamily: 'monospace',
backgroundColor: 'var(--background-primary)'
},
header: {
padding: '5px 10px',
backgroundColor: 'var(--background-tertiary)',
borderBottom: '1px solid var(--border-color)',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexShrink: 0
},
clearButton: {
background: 'none',
border: '1px solid var(--border-color)',
color: 'var(--text-secondary)',
cursor: 'pointer',
borderRadius: '3px',
fontSize: '12px'
},
body: {
flex: 1,
overflowY: 'auto',
padding: '10px',
},
pre: {
margin: 0,
whiteSpace: 'pre-wrap',
wordWrap: 'break-word',
color: 'var(--text-primary)',
fontSize: '13px'
},
};
export default Console;