make client own package (using create-react-app)

client/src/LetterOptions.js

@@ -0,0 +1,120 @@
+import React from 'react';
+
+import Collapsible from 'react-collapsible';
+import Input from './Input';
+import TextAreaInput from './TextAreaInput';
+import Select from './Select';
+
+import './LetterOptions.css';
+
+const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt';
+
+export default function(props) {
+  const templateTypeOptions = [
+    {
+      value: 'brief-fam',
+      name: 'Familie'
+    },
+    {
+      value: 'brief-valerie',
+      name: 'Valerie'
+    },
+    {
+      value: 'brief-rain',
+      name: 'Rain Baumeister'
+    },
+    {
+      value: 'brief-thomas',
+      name: 'Thomas'
+    }
+  ];
+
+  return (
+    <div className="letter-options">
+      <Select
+        name="template"
+        text="Vorlage"
+        onchange={props.onChange}
+        value={props.template}
+        options={templateTypeOptions}
+      />
+
+      <TextAreaInput
+        name="address"
+        text="Adresse"
+        placeholder={EXAMPLE_ADDRESS}
+        onchange={props.onChange}
+        value={props.address}
+      />
+      <Input
+        name="subject"
+        text="Betreff"
+        placeholder="Betreffzeile"
+        onchange={props.onChange}
+        value={props.subject}
+      />
+      <Collapsible trigger="Bezugszeichenzeile">
+        <Input
+          name="yourRef"
+          text="Ihr Zeichen"
+          onchange={props.onChange}
+          value={props.yourRef}
+        />
+        <Input
+          name="yourMail"
+          text="Ihr Schreiben vom"
+          onchange={props.onChange}
+          value={props.yourMail}
+        />
+        <Input
+          name="customer"
+          text="Kundernummer"
+          onchange={props.onChange}
+          value={props.customer}
+        />
+        <Input
+          name="invoice"
+          text="Rechnung"
+          onchange={props.onChange}
+          value={props.invoice}
+        />
+        <Input
+          name="yourMail"
+          text="Ihr Schreiben vom"
+          onchange={props.onChange}
+          value={props.yourMail}
+        />
+      </Collapsible>
+      <Collapsible trigger="Sonstige Einstellungen">
+        <Input
+          name="date"
+          text="Datum"
+          placeholder="Heute"
+          onchange={props.onChange}
+          value={props.date}
+        />
+        <Input
+          name="opening"
+          text="Eröffnung"
+          placeholder="Sehr geehrte Damen und Herren"
+          onchange={props.onChange}
+          value={props.opening}
+        />
+        <Input
+          name="closing"
+          text="Grußform"
+          placeholder="Mit freundlichen Grüßen"
+          onchange={props.onChange}
+          value={props.closing}
+        />
+      </Collapsible>
+      <TextAreaInput
+        name="body"
+        text="Brieftext"
+        onchange={props.onChange}
+        placeholder="Inhalt des Briefes"
+        value={props.body}
+      />
+    </div>
+  );
+};