Initial import

src/components/RawJsonSection.tsx

@@ -0,0 +1,30 @@
+type RawJsonSectionProps = {
+  isAllRecordsSelected: boolean;
+  hasSelectedRecord: boolean;
+  recordJsonDraft: string;
+  jsonText: string;
+  onRawJsonEditorChange: (nextText: string) => void;
+};
+
+export default function RawJsonSection(props: RawJsonSectionProps) {
+  const {
+    isAllRecordsSelected,
+    hasSelectedRecord,
+    recordJsonDraft,
+    jsonText,
+    onRawJsonEditorChange,
+  } = props;
+
+  return (
+    <>
+      <h2 className="raw-heading">Raw JSON</h2>
+      <textarea
+        value={!isAllRecordsSelected && hasSelectedRecord ? recordJsonDraft : jsonText}
+        onChange={(event) => onRawJsonEditorChange(event.target.value)}
+        spellCheck={false}
+        aria-label="JSON editor"
+        className="json-editor"
+      />
+    </>
+  );
+}