Spaces:
Sleeping
Sleeping
File size: 2,725 Bytes
cce8120 | 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 | import React, { useEffect } from 'react';
const getLanguageMode = (filename = '') => {
const ext = filename.split('.').pop()?.toLowerCase();
switch (ext) {
case 'js': case 'jsx': return 'JavaScript / React';
case 'ts': case 'tsx': return 'TypeScript / React';
case 'py': return 'Python';
case 'json': return 'JSON';
case 'html': return 'HTML';
case 'css': return 'CSS';
case 'sh': return 'Bash / Shell';
case 'md': return 'Markdown';
default: return 'Plain Text';
}
};
export default function CodeEditor({ filename, value, onChange, onSave }) {
const language = getLanguageMode(filename);
useEffect(() => {
const handleKeyDown = (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
if (onSave) onSave();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [onSave]);
const lineCount = (value || '').split('\n').length;
const lineNumbers = Array.from({ length: Math.max(lineCount, 1) }, (_, i) => i + 1);
return (
<div className="flex flex-col h-full bg-slate-950 border border-slate-800 rounded-lg overflow-hidden font-mono text-sm">
{/* Editor Status Bar */}
<div className="bg-slate-900 px-4 py-2 text-xs text-slate-400 border-b border-slate-800 flex justify-between items-center select-none">
<div className="flex items-center gap-3">
<span className="text-slate-200 font-semibold">{filename || 'Untitled'}</span>
<span className="bg-slate-800 px-2 py-0.5 rounded text-[10px] text-blue-400 font-medium uppercase">
{language}
</span>
</div>
<div className="flex items-center gap-4 text-[11px]">
<span>Lines: {lineCount}</span>
<span className="text-slate-500">Press Ctrl+S to save</span>
</div>
</div>
{/* Main Textarea Area with Line Numbers */}
<div className="flex-1 flex overflow-hidden">
{/* Line Numbers Sidebar */}
<div className="bg-slate-900/50 text-slate-600 px-3 py-3 select-none text-right border-r border-slate-800/60 leading-6 text-xs min-w-[2.5rem]">
{lineNumbers.map((num) => (
<div key={num}>{num}</div>
))}
</div>
{/* Text Input Surface */}
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder="Start typing or select a file to edit..."
spellCheck="false"
className="flex-1 bg-transparent text-slate-100 p-3 outline-none resize-none leading-6 font-mono text-xs tab-4 caret-blue-500"
/>
</div>
</div>
);
}
|