val 0.4.0

An arbitrary precision calculator language
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import { Editor } from '@/components/editor';
import { EditorSettingsDialog } from '@/components/editor-settings-dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { Extension } from '@codemirror/state';

interface EditorPaneProps {
  currentExample: string;
  examples: Record<string, string>;
  extensions: Extension[];
  onChange: (value: string) => void;
  onExampleChange: (value: string) => void;
  value: string;
}

export const EditorPane = ({
  currentExample,
  examples,
  extensions,
  onChange,
  onExampleChange,
  value,
}: EditorPaneProps) => {
  return (
    <div className='flex h-full min-h-0 flex-col overflow-hidden'>
      <div className='flex items-center justify-between border-b bg-gray-50 px-2 py-1'>
        <Select value={currentExample} onValueChange={onExampleChange}>
          <SelectTrigger className='h-7 w-36 bg-white text-sm'>
            <SelectValue placeholder='Select example' />
          </SelectTrigger>
          <SelectContent>
            {Object.keys(examples).map((key) => (
              <SelectItem key={key} value={key}>
                {key}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <EditorSettingsDialog />
      </div>

      <div className='flex-1 overflow-hidden'>
        <Editor value={value} onChange={onChange} extensions={extensions} />
      </div>
    </div>
  );
};