mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-24 13:54:31 +00:00
814f595995
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>
88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import Editor from '@monaco-editor/react'
|
|
import { Check, Copy } from 'lucide-react'
|
|
import { useMemo, useState } from 'react'
|
|
|
|
import { Button, cn, copyToClipboard } from 'ui'
|
|
|
|
type SqlMonacoBlockProps = {
|
|
value?: string
|
|
className?: string
|
|
wrapperClassName?: string
|
|
hideCopy?: boolean
|
|
// Fixed height in px. Defaults to 310 to match previous CodeBlock max height
|
|
height?: number
|
|
// Show line numbers. Defaults to false to match previous CodeBlock
|
|
lineNumbers?: 'on' | 'off'
|
|
}
|
|
|
|
export const SqlMonacoBlock = ({
|
|
value,
|
|
className,
|
|
wrapperClassName,
|
|
height = 310,
|
|
lineNumbers = 'off',
|
|
hideCopy = false,
|
|
}: SqlMonacoBlockProps) => {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const content = useMemo(() => value ?? '', [value])
|
|
|
|
const handleCopy = (value: string) => {
|
|
setCopied(true)
|
|
copyToClipboard(value)
|
|
setTimeout(() => setCopied(false), 1000)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn('group relative border rounded-md overflow-hidden w-full', wrapperClassName)}
|
|
>
|
|
<Editor
|
|
theme="supabase"
|
|
language="pgsql"
|
|
value={content}
|
|
height={height}
|
|
className={className}
|
|
wrapperProps={{
|
|
className:
|
|
'[&_.monaco-editor]:!bg-transparent [&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!outline-transparent [&_.cursor]:!hidden',
|
|
}}
|
|
options={{
|
|
readOnly: true,
|
|
domReadOnly: true,
|
|
fontSize: 13,
|
|
minimap: { enabled: false },
|
|
lineNumbers,
|
|
renderLineHighlight: 'none',
|
|
scrollbar: { vertical: 'auto', horizontal: 'auto' },
|
|
overviewRulerLanes: 0,
|
|
overviewRulerBorder: false,
|
|
glyphMargin: false,
|
|
folding: false,
|
|
lineDecorationsWidth: 0,
|
|
lineNumbersMinChars: lineNumbers === 'off' ? 0 : 3,
|
|
wordWrap: 'on',
|
|
scrollBeyondLastLine: false,
|
|
selectionHighlight: false,
|
|
occurrencesHighlight: 'off',
|
|
fixedOverflowWidgets: true,
|
|
padding: { top: 12, bottom: 12 },
|
|
tabIndex: -1,
|
|
}}
|
|
/>
|
|
|
|
{!hideCopy && (
|
|
<div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Button
|
|
type="default"
|
|
className="px-1.5"
|
|
icon={copied ? <Check /> : <Copy />}
|
|
onClick={() => handleCopy(content)}
|
|
>
|
|
{copied ? 'Copied' : ''}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|