Spaces:
Sleeping
Sleeping
File size: 3,512 Bytes
46b394e c9c2d7e 4a05b37 46b394e c9c2d7e 46b394e c9c2d7e 46b394e c9c2d7e 46b394e c9c2d7e 4a05b37 c9c2d7e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | import React, { useState } from 'react';
const CodePreview = ({ code, path, testResult }) => {
const [copied, setCopied] = useState(false);
const copyToClipboard = () => {
if (code) {
navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
if (!code) {
return (
<div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)' }}>
<div style={{ fontSize: '3rem', marginBottom: '1rem' }}>📝</div>
<p>Generated code will appear here</p>
<p style={{ fontSize: '0.875rem', marginTop: '0.5rem', opacity: 0.7 }}>Fill out the form and click "Generate Agent"</p>
</div>
);
}
return (
<div className="card">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
<h2>Code Preview</h2>
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
{path && <span className="status-badge status-success">Saved to {path.split('/').pop()}</span>}
<button
onClick={copyToClipboard}
style={{
padding: '0.5rem 1rem',
borderRadius: '0.5rem',
border: '1px solid var(--glass-border)',
background: copied ? 'rgba(34, 197, 94, 0.2)' : 'var(--glass-bg)',
color: copied ? '#4ade80' : 'var(--text-primary)',
cursor: 'pointer',
fontSize: '0.875rem',
transition: 'all 0.2s ease'
}}
>
{copied ? '✓ Copied!' : '📋 Copy'}
</button>
</div>
</div>
<div style={{ position: 'relative' }}>
<pre style={{ maxHeight: '600px', overflow: 'auto' }}>
<code>{code}</code>
</pre>
</div>
<div style={{ marginTop: '1rem', padding: '0.75rem', background: 'rgba(59, 130, 246, 0.1)', borderRadius: '0.5rem', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
💡 <strong>Tip:</strong> Save this code to a .py file and run it with your API key set.
</div>
{testResult && (
<div style={{ marginTop: '1.5rem', borderTop: '1px solid var(--glass-border)', paddingTop: '1.5rem' }}>
<h3 style={{ marginBottom: '1rem', color: 'var(--accent-primary)' }}>Test Result</h3>
<div style={{
background: 'rgba(0, 0, 0, 0.3)',
padding: '1rem',
borderRadius: '0.5rem',
border: '1px solid var(--glass-border)',
fontFamily: 'monospace',
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
maxHeight: '300px',
overflowY: 'auto'
}}>
{testResult}
</div>
</div>
)}
</div>
);
};
export default CodePreview;
|