File size: 3,743 Bytes
f91a684 | 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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | import { Loader2 } from 'lucide-react';
interface RightPanelProps {
input: string;
onInputChange: (value: string) => void;
output: string;
error: string;
loading: boolean;
executionTime: number | null;
status: string;
}
export default function RightPanel({
input,
onInputChange,
output,
error,
loading,
executionTime,
status,
}: RightPanelProps) {
const dotClass =
status === 'error' || status === 'compile_error'
? 'ryp-statusbar__dot--error'
: status === 'running'
? 'ryp-statusbar__dot--running'
: '';
return (
<div className="flex flex-col h-full" style={{ background: '#1a1a2e' }}>
{/* Custom Input */}
<div className="flex flex-col" style={{ flex: '0 0 auto' }}>
<div className="ryp-section-header">
<span className="ryp-section-header__icon">▶_</span>
<span>Custom Input</span>
</div>
<div className="p-3">
<textarea
value={input}
onChange={(e) => onInputChange(e.target.value)}
spellCheck={false}
placeholder="stdin input for your program..."
className="w-full resize-none rounded-md p-3 font-mono text-sm outline-none transition"
style={{
height: 130,
background: '#252537',
border: '1px solid #333355',
color: '#e2e2f0',
caretColor: '#8b5cf6',
fontFamily: "'JetBrains Mono', Consolas, monospace",
}}
/>
</div>
</div>
{/* Output */}
<div className="flex flex-col flex-1 min-h-0">
<div className="ryp-section-header">
<span className="ryp-section-header__icon">▶_</span>
<span>Output</span>
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
<span className={`ryp-statusbar__dot ${dotClass}`} />
<span style={{ fontSize: 11, color: '#9090b0' }}>
{executionTime === null ? '--' : `${executionTime}ms`}
</span>
</div>
</div>
<div className="flex-1 overflow-auto p-3 ryp-compiler-scroll">
{loading ? (
<div className="flex items-center justify-center h-full min-h-[100px]">
<Loader2 size={24} className="animate-spin" style={{ color: '#8b5cf6' }} />
</div>
) : (
<div className="space-y-2">
{output && (
<pre
className="whitespace-pre-wrap font-mono text-sm leading-6 rounded-md p-3"
style={{
background: '#252537',
border: '1px solid #333355',
color: '#4ade80',
fontFamily: "'JetBrains Mono', Consolas, monospace",
}}
>
{output}
</pre>
)}
{error && (
<pre
className="whitespace-pre-wrap font-mono text-sm leading-6 rounded-md p-3"
style={{
background: 'rgba(239, 68, 68, 0.08)',
border: '1px solid rgba(239, 68, 68, 0.25)',
color: '#f87171',
fontFamily: "'JetBrains Mono', Consolas, monospace",
}}
>
{error}
</pre>
)}
{!output && !error && (
<p className="text-sm" style={{ color: '#55556a', fontFamily: "'Inter', sans-serif" }}>
Run code to see output.
</p>
)}
</div>
)}
</div>
</div>
</div>
);
}
|