Split view

'use client';

import { Prose, SplitView, Text } from '@jsonresume/ui';
import * as styles from './editor.css';

// Drag the divider, or focus it and use the arrow keys (Shift for bigger steps).
export default function SplitViewEditor() {
  return (
    <div className={styles.frame}>
      <SplitView paneLabels={['Editor', 'Preview']} defaultSizes={[45, 55]}>
        <div className={styles.pane}>
          <Text caps tone="muted">
            Editor
          </Text>
          <pre
            className={styles.code}
          >{`{\n  "basics": {\n    "name": "Ada Lovelace"\n  }\n}`}</pre>
        </div>
        <div className={styles.pane}>
          <Prose>
            <h2>Ada Lovelace</h2>
            <p>The preview updates as you type.</p>
          </Prose>
        </div>
      </SplitView>
    </div>
  );
}

import { style } from '@vanilla-extract/css';
import { vars } from '@jsonresume/ui/tokens';

export const frame = style({
  height: '16rem',
  border: `1px solid ${vars.color.border.default}`,
  borderRadius: vars.radius.sm,
  backgroundColor: vars.color.surface.raised,
});

export const pane = style({
  display: 'grid',
  alignContent: 'start',
  gap: vars.space[2],
  padding: vars.space[4],
});

export const code = style({
  margin: 0,
  fontFamily: vars.font.family.mono,
  fontSize: vars.font.size.xs,
});