BottomPanel.tsxā¢2.31 kB
import React from 'react';
import Terminal from './Terminal.js';
import WebPreview from './WebPreview.js';
import type { BottomPanelView } from '../App.js';
interface BottomPanelProps {
activeView: BottomPanelView;
setActiveView: (view: BottomPanelView) => void;
terminalOutput: string[];
setTerminalOutput: React.Dispatch<React.SetStateAction<string[]>>;
htmlContent: string | null;
}
const BottomPanel: React.FC<BottomPanelProps> = ({ activeView, setActiveView, terminalOutput, setTerminalOutput, htmlContent }) => {
return (
<div style={styles.container}>
<div style={styles.tabs}>
<button
style={{ ...styles.tab, ...(activeView === 'terminal' ? styles.activeTab : {}) }}
onClick={() => setActiveView('terminal')}
aria-pressed={activeView === 'terminal'}
>
TERMINAL
</button>
<button
style={{ ...styles.tab, ...(activeView === 'preview' ? styles.activeTab : {}) }}
onClick={() => setActiveView('preview')}
aria-pressed={activeView === 'preview'}
>
WEB PREVIEW
</button>
</div>
<div style={styles.content}>
{activeView === 'terminal' && <Terminal terminalOutput={terminalOutput} setTerminalOutput={setTerminalOutput} />}
{activeView === 'preview' && <WebPreview htmlContent={htmlContent} />}
</div>
</div>
);
};
const styles: { [key: string]: React.CSSProperties } = {
container: {
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'var(--background-secondary)',
},
tabs: {
display: 'flex',
backgroundColor: 'var(--background-secondary)',
borderBottom: '1px solid var(--border-color)',
flexShrink: 0,
},
tab: {
padding: '5px 10px',
cursor: 'pointer',
background: 'none',
border: 'none',
color: 'var(--text-secondary)',
fontFamily: 'monospace',
fontSize: '13px',
borderTop: '1px solid transparent',
},
activeTab: {
color: 'var(--text-primary)',
backgroundColor: 'var(--background-primary)',
borderTop: '1px solid var(--accent-primary)',
},
content: {
flex: 1,
overflow: 'hidden',
backgroundColor: 'var(--background-primary)',
}
};
export default BottomPanel;