pdfer/components/LetterOptions.tsx

import React from 'react'

import Collapsible from 'react-collapsible'
import Input from './Input'
import TextAreaInput from './TextAreaInput'
import Select from './Select'
import { IDocProps } from '../interfaces/IDocProps'

//import './LetterOptions.css';

const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt'

interface IProps extends IDocProps {
  onChange: (name: string, event: React.ChangeEvent<{ value: string }>) => void
}

export default function LetterOptions(props: IProps) {
  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="myRef" text="Unser Zeichen" onchange={props.onChange} value={props.myRef} />
        <Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
        <Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
      </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}
        />
        <Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
      </Collapsible>
      <TextAreaInput
        name="body"
        text="Brieftext"
        onchange={props.onChange}
        placeholder="Inhalt des Briefes"
        value={props.body}
      />
    </div>
  )
}