Spaces:
Build error
Build error
File size: 4,334 Bytes
e350ad1 0758862 e350ad1 8b44b0d 0758862 e350ad1 0758862 e350ad1 0758862 e350ad1 0758862 e350ad1 0758862 e350ad1 8b44b0d 0758862 e350ad1 0758862 e350ad1 | 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 114 115 116 117 118 119 120 121 122 123 124 125 126 | import { useState } from 'react'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
import Modal from 'react-modal'
const CodeEditor = ({ language }) => {
const [code, setCode] = useState('// کد خود را اینجا بنویسید\nconsole.log("سلام دنیا")')
const [output, setOutput] = useState('')
const [isModalOpen, setIsModalOpen] = useState(false)
const [projectType, setProjectType] = useState('nodejs')
const runCode = () => {
try {
const result = eval(code)
setOutput(JSON.stringify(result, null, 2))
} catch (error) {
setOutput(`خطا: ${error.message}`)
}
}
const generateProject = () => {
setIsModalOpen(true)
}
return (
<div className="bg-white rounded-lg shadow-md p-4">
<div className="flex justify-between mb-4">
<h2 className="text-xl font-bold">
{language === 'fa' ? 'ویرایشگر کد هوشمند' : 'Smart Code Editor'}
</h2>
<div className="flex space-x-2">
<button
onClick={runCode}
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
>
{language === 'fa' ? 'اجرای کد' : 'Run Code'}
</button>
<button
onClick={generateProject}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
{language === 'fa' ? 'ساخت پروژه جدید' : 'New Project'}
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<SyntaxHighlighter
language="javascript"
style={atomDark}
className="rounded-lg h-96"
showLineNumbers
>
{code}
</SyntaxHighlighter>
<textarea
className="w-full mt-2 p-2 border rounded font-mono"
value={code}
onChange={(e) => setCode(e.target.value)}
rows={5}
dir="ltr"
/>
</div>
<div>
<h3 className="font-bold mb-2">
{language === 'fa' ? 'خروجی برنامه' : 'Program Output'}
</h3>
<pre className="bg-gray-800 text-green-400 p-4 rounded-lg h-96 overflow-auto">
{output || (language === 'fa' ? 'خروجی اینجا نمایش داده میشود' : 'Output will appear here')}
</pre>
</div>
</div>
<Modal
isOpen={isModalOpen}
onRequestClose={() => setIsModalOpen(false)}
contentLabel="Project Generator"
className="modal"
overlayClassName="overlay"
>
<div className="bg-white p-6 rounded-lg max-w-md mx-auto mt-20">
<h2 className="text-xl font-bold mb-4">
{language === 'fa' ? 'ساخت پروژه جدید' : 'Create New Project'}
</h2>
<div className="mb-4">
<label className="block mb-2">
{language === 'fa' ? 'نوع پروژه' : 'Project Type'}
</label>
<select
className="w-full p-2 border rounded"
value={projectType}
onChange={(e) => setProjectType(e.target.value)}
>
<option value="nodejs">Node.js</option>
<option value="react">React</option>
<option value="nextjs">Next.js</option>
<option value="python">Python</option>
</select>
</div>
<div className="flex justify-end space-x-2">
<button
onClick={() => setIsModalOpen(false)}
className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
>
{language === 'fa' ? 'انصراف' : 'Cancel'}
</button>
<button
onClick={() => {
// Generate project structure
setIsModalOpen(false)
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
{language === 'fa' ? 'تولید پروژه' : 'Generate Project'}
</button>
</div>
</div>
</Modal>
</div>
)
}
export default CodeEditor |