add message count display as additional feature

Author: Abubakar-Meigag

chat-app/client/src/App.tsx

@@ -54,7 +54,7 @@ function App() {
       <h1 className="app_title">Beeko Chat App</h1>
       <div className="app_container">
         <MessageList messages={messages} />
-        <MessageForm name={name} onNameChange={setName} onSend={handleSend} />
+        <MessageForm name={name} onNameChange={setName} onSend={handleSend} messageCount={messages.length} />
       </div>
     </div>
   );

chat-app/client/src/components/MessageForm.css

@@ -61,4 +61,19 @@
 .button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.count {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fbbf24;
+  border: 2px solid #fbbf24;
+  padding: 0.4rem 1rem;
+  border-radius: 6px;
 }

chat-app/client/src/components/MessageForm.tsx

@@ -5,9 +5,10 @@ interface Props {
   name: string;
   onNameChange: (name: string) => void;
   onSend: (text: string) => void;
+  messageCount: number;
 }
 
-function MessageForm({ name, onNameChange, onSend }: Props) {
+function MessageForm({ name, onNameChange, onSend, messageCount }: Props) {
   const [text, setText] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -45,13 +46,18 @@ function MessageForm({ name, onNameChange, onSend }: Props) {
           rows={3}
         />
       </div>
-      <button
-        className="button"
-        type="submit"
-        disabled={!name.trim() || !text.trim()}
-      >
-        Send
-      </button>
+      <div className="actions">
+
+        <span className="count">messages: {messageCount}</span>
+
+        <button
+          className="button"
+          type="submit"
+          disabled={!name.trim() || !text.trim()}
+        >
+          Send
+        </button>
+      </div>
     </form>
   );
 }