Feedback page

src/Components/App/App.tsx

@@ -40,7 +40,6 @@ export default function App() {
               <Route path="/" element={<Home />} />
               <Route path="/login" element={<Login />} />
               <Route path="/unauthorized" element={<Unauthorized />} />
-						  <Route path='/other/feedback' element={<Feedback/>} />
 						  <Route path='/video/subtitles' element={<Subtitles/>} />
 						  <Route path='/actions-reactions/home' element={<ActionsReactions/>} />
 						  <Route path='/actions-reactions/actions' element={<CreateActions/>} />
@@ -61,6 +60,7 @@ export default function App() {
                 }
               >
                 <Route path="/audio/compressor-level" element={<CompressorLevel />} />
+                <Route path='/other/feedback' element={<Feedback/>} />
               </Route>
 
               <Route

src/Components/Other/Feedback/Feedback.tsx

@@ -1,15 +1,76 @@
 import React from 'react';
-import {
-	Routes,
-	Route,
-	Link
-} from "react-router-dom";
+import { useState } from "react";
+import useAxiosPrivate from "../../../hooks/useAxiosPrivate";
 
 export const Feedback = () => {
-    return (
-      <>
-        <h1> Feedback</h1>
+  const [message, setMessage] = useState("");
+  const axiosPrivate = useAxiosPrivate();
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
 
-      </>
-    );
+
+    try {
+      const response = await axiosPrivate.post("/feedBacks/create", {
+        message,
+      });
+      alert("Your feedback has been sent")
+      setMessage("");
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  return (
+    <section style={{
+      width: "100%",
+      maxWidth: "420px",
+      minHeight: "400px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-start",
+      padding: "1rem",
+      backgroundColor: "rgba(0,0,0,0.4)",
+    }}>
+      <h1 style={{color: "#f56f28"}}>FeedBack member Page</h1>
+      <br />
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label
+          htmlFor="text">
+            feedBack:</label>
+        </div>
+        <input
+          type="text"
+          id="message"
+          autoComplete="off"
+          onChange={(e) => setMessage(e.target.value)}
+          value={message}
+          style={{
+            marginTop: "1rem",
+            width: "100%",
+            padding: "0.5rem",
+            borderRadius: "1rem",
+            fontSize: "1rem", 
+          }}
+          required
+        />
+        <div style={{
+          display: "flex",
+          justifyContent: "center",
+        }}>
+          <button style={{
+            borderColor: "#f56f28",
+            width: "175px",
+            backgroundColor: "transparent",
+            color: "#FFFFFF",
+            fontSize: "20px",
+            margin: "1rem",
+            padding: "0.5rem",
+            borderRadius: "0.5rem",
+          }}>submit</button>
+        </div>
+      </form>
+    </section>
+  );
 }