f644937604
Next.js 16, React 19, Monaco editor, Anthropic SDK, multi-provider AI, Wandbox Python execution, iframe HTML preview, SQLite auth + session persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import type { SupportedLanguage } from '@/types';
|
|
|
|
const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex h-full w-full items-center justify-center bg-[#1e1e1e]">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-blue-400" />
|
|
</div>
|
|
),
|
|
});
|
|
|
|
interface Props {
|
|
language: SupportedLanguage;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
height?: string;
|
|
}
|
|
|
|
export default function CodeEditor({ language, value, onChange, height = '100%' }: Props) {
|
|
const monacoLanguage = language === 'html' ? 'html' : 'python';
|
|
|
|
return (
|
|
<MonacoEditor
|
|
height={height}
|
|
language={monacoLanguage}
|
|
value={value}
|
|
theme="vs-dark"
|
|
onChange={(val) => onChange(val ?? '')}
|
|
options={{
|
|
fontSize: 14,
|
|
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace",
|
|
minimap: { enabled: false },
|
|
scrollBeyondLastLine: false,
|
|
padding: { top: 16, bottom: 16 },
|
|
lineNumbersMinChars: 3,
|
|
tabSize: 4,
|
|
wordWrap: 'on',
|
|
smoothScrolling: true,
|
|
cursorSmoothCaretAnimation: 'on',
|
|
}}
|
|
/>
|
|
);
|
|
}
|