work on styles

components/App.tsx

@@ -11,7 +11,7 @@ import { IDocProps } from '../interfaces/IDocProps'
 
 export default function App() {
   const [options, setOptions] = useState<IDocProps>({
-    address: 'Max Mustermann\\\\Musterstrasse\\\\12345 Musterstadt',
+    address: 'Max Mustermann\nMusterstrasse\n12345 Musterstadt',
     body: 'Inhalt des Briefs',
     closing: 'Mit freundlichen Grüßen',
     customer: '',
@@ -79,17 +79,17 @@ export default function App() {
   }
 
   return (
-    <div className="home">
-      <div>
+    <div className="flex flex-col space-x-5 max-w-7xl mx-auto py-3 sm:px-2 lg:px-3 bg-gray-100">
+      <div className="flex flex-col space-y-5 shadow sm:rounded-md sm:overflow-hidden">
         <LetterOptions onChange={_onChange} {...options} />
-        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
-      </div>
-      <div>
-        <div>
+        <div className="flex space-x-3">
           <Button onClick={_onGenerate}>Backe PDF</Button>
           <Button onClick={_onClear}>Alles Löschen</Button>
         </div>
+      </div>
+      <div className="flex flex-col space-y-5">
         <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
+        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
       </div>
     </div>
   )

components/Button.tsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 export default function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
   return (
-    <button className="p-button" onClick={onClick}>
+    <button
+      type="button"
+      onClick={onClick}
+      className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    >
       {children}
     </button>
   )

components/Header.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 export default function Header() {
   return (
-    <header className="header">
-      <h1>PDFer</h1>
+    <header className="my-3">
+      <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">PDFer</h1>
     </header>
   )
 }

components/Input.tsx

@@ -14,15 +14,20 @@ export default function Input({
   onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
 }) {
   return (
-    <label>
-      {text}
-      <input
-        className={name}
-        type="text"
-        placeholder={placeholder}
-        onChange={onchange.bind(null, name)}
-        value={value}
-      />
-    </label>
+    <div>
+      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+        {text}
+      </label>
+      <div className="mt-1 flex rounded-md shadow-sm">
+        <input
+          type="text"
+          name={name}
+          className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
+          placeholder={placeholder}
+          value={value}
+          onChange={onchange.bind(null, name)}
+        />
+      </div>
+    </div>
   )
 }

components/Layout.tsx

@@ -4,9 +4,9 @@ import Header from './Header'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div id="app">
+    <div>
       <Header />
-      <div id="content">{children}</div>
+      <main>{children}</main>
     </div>
   )
 }

components/LetterOptions.tsx

@@ -35,7 +35,7 @@ export default function LetterOptions(props: IProps) {
   ]
 
   return (
-    <div className="letter-options">
+    <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
       <Select
         name="template"
         text="Vorlage"
@@ -50,8 +50,16 @@ export default function LetterOptions(props: IProps) {
         placeholder={EXAMPLE_ADDRESS}
         onchange={props.onChange}
         value={props.address}
+        styles="h-20"
       />
       <Input name="subject" text="Betreff" placeholder="Betreffzeile" onchange={props.onChange} value={props.subject} />
+      <TextAreaInput
+        name="body"
+        text="Brieftext"
+        onchange={props.onChange}
+        placeholder="Inhalt des Briefes"
+        value={props.body}
+      />
       <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} />
@@ -77,13 +85,6 @@ export default function LetterOptions(props: IProps) {
         />
         <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>
   )
 }

components/Select.tsx

@@ -14,15 +14,22 @@ export default function Select({
   options: { name: string; value: string }[]
 }) {
   return (
-    <label>
-      {text}
-      <select className={name} onChange={onchange.bind(null, name)} value={value}>
+    <div className="">
+      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+        {text}
+      </label>
+      <select
+        name={name}
+        className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+        onChange={onchange.bind(null, name)}
+        value={value}
+      >
         {options.map((option) => (
           <option value={option.value} key={option.value}>
             {option.name}
           </option>
         ))}
       </select>
-    </label>
+    </div>
   )
 }

components/TextAreaInput.tsx

@@ -6,17 +6,31 @@ export default function TextAreaInput({
   placeholder,
   onchange,
   value,
+  styles = '',
 }: {
   text: string
   name: string
   placeholder: string
   onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
   value: string
+  styles?: string
 }) {
   return (
-    <label>
-      {text}
-      <textarea className={name} placeholder={placeholder} onChange={onchange.bind(null, name)} value={value} />
-    </label>
+    <div>
+      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+        {text}
+      </label>
+      <div className="mt-1">
+        <textarea
+          id="about"
+          name="about"
+          rows={10}
+          className={`shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md ${styles}`}
+          placeholder={placeholder}
+          onChange={onchange.bind(null, name)}
+          value={value}
+        ></textarea>
+      </div>
+    </div>
   )
 }