ruvector/studio/components/ui/DiffViewer.tsx
rUv 814f595995 feat(studio): Add complete RuVector Studio application
Major additions:
- Complete Next.js studio application with 1600+ components
- Docker support (Dockerfile.combined, docker-compose.yml)
- GCP deployment documentation and benchmarks
- SQL benchmark scripts for performance testing
- Sentry integration for monitoring
- Comprehensive test suite and mocks

Studio features:
- Dashboard and admin interfaces
- Data visualization components
- Authentication and user management
- API integration with RuVector backend
- Static data and public assets

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-06 23:04:48 +00:00

48 lines
1.2 KiB
TypeScript

import { DiffEditor } from '@monaco-editor/react'
import type { editor as monacoEditor } from 'monaco-editor'
interface DiffViewerProps {
/** Original/left hand side content (optional) */
original?: string
/** Modified/right hand side content */
modified: string | undefined
/** Language identifier understood by Monaco */
language: string
/** Height for the editor container */
height?: string | number
/** Whether to render diffs side-by-side */
sideBySide?: boolean
}
// Centralised set of options so all diff editors look the same
const DEFAULT_OPTIONS: monacoEditor.IStandaloneDiffEditorConstructionOptions = {
readOnly: true,
renderSideBySide: false,
minimap: { enabled: false },
wordWrap: 'on',
lineNumbers: 'on',
folding: false,
padding: { top: 16, bottom: 16 },
lineNumbersMinChars: 3,
fontSize: 13,
scrollBeyondLastLine: false,
}
export const DiffViewer = ({
original = '',
modified = '',
language,
height = '100%',
sideBySide = false,
}: DiffViewerProps) => (
<DiffEditor
theme="supabase"
language={language}
height={height}
original={original}
modified={modified}
options={{ ...DEFAULT_OPTIONS, renderSideBySide: sideBySide }}
/>
)
export default DiffViewer