feat: add CodeMirror-based code editor component and routing setup
- Implemented CodeEditor component using CodeMirror for JavaScript editing. - Added global styles in index.css for consistent UI. - Set up routing with TanStack Router, including root and nested routes. - Created About, C, and Editor routes with respective components. - Integrated CodeEditor into the Editor route for code editing functionality. - Configured TypeScript settings in tsconfig.json for strict type checking. - Established Vite configuration for React and TanStack Router integration.
This commit is contained in:
15
src/routes/editor/index.tsx
Normal file
15
src/routes/editor/index.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { CodeEditor } from '../../components/CodeEditor'
|
||||
|
||||
export const Route = createFileRoute('/editor/')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div style={{ padding: '20px' }}>
|
||||
<h1>Code Editor</h1>
|
||||
<CodeEditor initialValue="// Write your code here\nconsole.log('Hello CodeMirror!')" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user