redesigned NewPostForm component for title and textarea

src/components/NewPostForm.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 const NewPostForm = ({ addPost }) => {
+    const [title, setTitle] = useState('');
     const [text, setText] = useState('');
 
     const handleSubmit = (e) => {
@@ -15,10 +16,24 @@ const NewPostForm = ({ addPost }) => {
         <form className="new-post-form" onSubmit={handleSubmit}>
             <input
                 type="text"
-                value={text}
-                onChange={(e) => setText(e.target.value)}
-                placeholder="Schreibe einen neuen Jodel..."
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Titel"
             />
+            <div className="textarea-container">
+                <textarea
+                    rows={5}
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    placeholder="Schreibe einen neuen Jodel..."
+                    maxLength={500}
+                />
+                <div className="char-count-container">
+                    <span className={text.length === 500 ? "char-count max-char-count" : "char-count"}>
+                        {text.length} / 500
+                    </span>
+                </div>
+            </div>
             <button type="submit">Posten</button>
         </form>
     );