redesigned NewPostForm component for title and textarea

src/App.scss

@@ -34,6 +34,37 @@ h1 {
     font-size: 1em;
   }
 
+  .textarea-container {
+    position: relative;
+    width: 100%;
+
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 15px;
+      margin-bottom: 10px;
+      border: 1px solid #ddd;
+      border-radius: 10px;
+      font-size: 1em;
+      font-family: Arial, sans-serif;
+    }
+
+    .char-count-container {
+      position: absolute;
+      bottom: 8px;
+      right: 12px;
+      font-size: 12px;
+      color: grey;
+      background: white;
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+
+    .max-char-count {
+      background-color: rgba(255, 0, 0, 0.25);
+    }
+  }
+
   button {
     padding: 15px;
     background-color: #ff9908;

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}
+                value={title}
-                onChange={(e) => setText(e.target.value)}
+                onChange={(e) => setTitle(e.target.value)}
-                placeholder="Schreibe einen neuen Jodel..."
+                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>
     );