first

components/VNEditor.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+
+interface VNEditorProps {
+  scriptText: string;
+  onScriptChange: (text: string) => void;
+}
+
+export const VNEditor = forwardRef<HTMLTextAreaElement, VNEditorProps>(({ 
+  scriptText, 
+  onScriptChange 
+}, ref) => {
+  return (
+    <div className="w-[40%] flex flex-col border-r border-gray-800">
+      <div className="flex-1 relative font-mono text-sm leading-6">
+        <textarea
+          ref={ref}
+          value={scriptText}
+          onChange={e => onScriptChange(e.target.value)}
+          spellCheck={false}
+          className="absolute inset-0 w-full h-full bg-[#0d1117] p-6 pl-12 outline-none resize-none text-gray-400 caret-cyan-400 z-10 custom-scrollbar"
+          style={{ 
+            fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+            whiteSpace: 'pre',
+            lineHeight: '24px'
+          }}
+        />
+        <div className="absolute top-0 left-0 w-12 h-full bg-[#0b0e14] border-r border-gray-800 flex flex-col items-center py-6 text-[10px] text-gray-700 select-none z-0">
+          {scriptText.split('\n').map((_, i) => (
+            <div key={i} style={{ height: '24px' }}>{i + 1}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+VNEditor.displayName = 'VNEditor';