WebPreview.tsxā¢1.33 kB
import React from 'react';
interface WebPreviewProps {
htmlContent: string | null;
}
const WebPreview: React.FC<WebPreviewProps> = ({ htmlContent }) => {
const srcDoc = htmlContent || `
<body style="margin: 0;">
<div style="color: var(--text-secondary); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-family); gap: 1rem; background-color: var(--background-primary)">
<p>This is the web preview panel.</p>
<p>Use the 'Preview' button in the editor to display an HTML file from the virtual file system.</p>
<p style="font-size: var(--font-size-small); text-align: center; max-width: 80%;">
Note: Running server-based frameworks like Streamlit or Flask is not supported as this environment cannot bind to network ports.
This previewer can only display generated static HTML files.
</p>
</div>
</body>
`;
return (
<iframe
title="Web Preview"
srcDoc={srcDoc}
style={styles.iframe}
sandbox="allow-scripts"
/>
);
};
const styles: { [key: string]: React.CSSProperties } = {
iframe: {
width: '100%',
height: '100%',
border: 'none',
backgroundColor: 'var(--background-primary)',
},
};
export default WebPreview;