extract TextInput component

src/components/caloriesInput/CaloriesInput.tsx

@@ -1,5 +1,6 @@
 import React, { FormEvent } from 'react';
 import { IconButton } from '../button/IconButton';
+import { TextInput } from '../textInput/TextInput';
 import styles from './caloriesInput.css';
 import { iconTypes } from '../icon/iconTypes';
 
@@ -47,13 +48,13 @@ function CaloriesInput ({addCalories, saveCalories, item}: CaloriesInputProps) {
     <form onSubmit={onSubmit} className={styles.caloriesInput}>
       <div className={styles.inputWrapper}>
         <div className={styles.formRow}>
-          <input key={itemTitle} id="caloriesTitle" placeholder="Nahrungsmittel" name="caloriesTitle" type="text"
+          <TextInput key={itemTitle} placeholder="Nahrungsmittel" name="caloriesTitle" type="text"
                  defaultValue={itemTitle}
                  required />
         </div>
 
         <div className={styles.formRow}>
-          <input key={itemCount} id="caloriesCount" placeholder="Kalorien" name="caloriesCount" type="number"
+          <TextInput key={itemCount} placeholder="Kalorien" name="caloriesCount" type="number"
                  defaultValue={itemCount}
                  required />
         </div>

src/components/textInput/TextInput.tsx

@@ -0,0 +1,13 @@
+import React, { HTMLProps } from 'react';
+import cx from 'classnames';
+import styles from './textInput.css';
+
+function TextInput ({ className, ...props}: HTMLProps<HTMLInputElement>) {
+  return (
+    <input {...{ className: cx(styles.textInput, className), ...props}} />
+  );
+}
+
+export {
+  TextInput
+};

src/components/textInput/textInput.css

@@ -0,0 +1,10 @@
+.textInput {
+    border: 1px solid #dddddd;
+    box-sizing: border-box;
+    padding: .2em .3em;
+    outline: none;
+
+    &:focus {
+        border-color: var(--primaryColor);
+    }
+}