Adding a separate page for feedback and rating. (Issue #354)

client/src/App.jsx

@@ -29,6 +29,7 @@ import Contributors from "./component/Contributors";
 import Discussion from "./component/Discussion";
 import ForgotPassword from "./component/ForgotPassword";
 import ResetPassword from "./component/ResetPassword";
+import Feedback from "./component/Feedback";
 // import VerifyEmail from "./component/Verify";
 // import ProtectedRoute from '../../client/src/component/ProtectedRoute'
 import NotFound from "./component/NotFound";
@@ -58,6 +59,7 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
         blog="Blogs"
         discussion="Discussion"
         contributors="Contributors"
+        Feedback="Feedback"
         showAlert={showAlert}
         mode={mode}
         toggleMode={toggleMode}
@@ -131,6 +133,9 @@ function App() {
               progress={progress}
               onLoaderFinished={() => setProgress(0)}
             />
+            <div className="App">
+              <Feedback/>
+            </div>
             <div className="alert-container">
               <Alert alert={alert} />
             </div>
@@ -199,6 +204,17 @@ function App() {
                     />
                   }
                 />
+                <Route
+                  exact
+                  path="/feedback"
+                  element={
+                    <Feedback
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
                 <Route
                   exact
                   path="/blog"
@@ -253,7 +269,7 @@ function App() {
                 <Route exact path='/forgot-password' element={<ForgotPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/reset-password' element={<ResetPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/codeofconduct' element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path='/feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
+                <Route exact path='/Feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />

client/src/FeedbackForm.css

@@ -0,0 +1,91 @@
+.feedback-container {
+    max-width: 400px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
+    color: #f0f0f0;
+    text-align: center;
+  }
+
+  .feedback-container h2 {
+    margin-bottom: 1.5rem;
+    color: #e0e0e0;
+  }
+
+  .feedback-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .feedback-form input,
+  .feedback-form textarea {
+    margin-bottom: 1rem;
+    padding: 0.8rem;
+    border: 1px solid #444;
+    border-radius: 4px;
+    background-color: #2e2e2e;
+    color: #f0f0f0;
+  }
+
+  .feedback-form input::placeholder,
+  .feedback-form textarea::placeholder {
+    color: #a0a0a0;
+  }
+
+  .feedback-form textarea {
+    resize: none;
+    height: 100px;
+  }
+
+  .rating {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .rating p {
+    margin: 0;
+    margin-right: 0.5rem;
+    color: #e0e0e0;
+  }
+
+  .star {
+    font-size: 1.5rem;
+    color: #ccc;
+    cursor: pointer;
+    transition: color 0.3s ease;
+  }
+
+  /* Filled stars - Gold when hovered or selected */
+  .star.filled {
+    color: #ffb400;
+  }
+
+  /* Additional hover effect: Make all stars up to the hovered one gold */
+  .star:hover,
+  .star:hover ~ .star {
+    color: #ccc;
+  }
+
+  .star:hover,
+  .star:hover ~ .star {
+    color: #ffb400;
+  }
+
+  .feedback-form button {
+    padding: 0.8rem;
+    border: none;
+    border-radius: 4px;
+    background-color: #ff6347;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .feedback-form button:hover {
+    background-color: #ff4500;
+  }
+

client/src/component/Feedback.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import "./client/src/FeedbackForm.css";
+
+const FeedbackForm = () => {
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    feedback: "",
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Feedback Submitted:", formData, "Rating:", rating);
+    // Add submission logic here
+  };
+
+  return (
+    <div className="feedback-container">
+      <h2>Give Us Your Feedback</h2>
+      <form onSubmit={handleSubmit} className="feedback-form">
+        <input
+          type="text"
+          name="name"
+          placeholder="Your Name"
+          value={formData.name}
+          onChange={handleInputChange}
+          required
+        />
+        <input
+          type="email"
+          name="email"
+          placeholder="Your Email"
+          value={formData.email}
+          onChange={handleInputChange}
+          required
+        />
+        <textarea
+          name="feedback"
+          placeholder="Your Feedback"
+          value={formData.feedback}
+          onChange={handleInputChange}
+          required
+        />
+
+        <div className="rating">
+          <p>Rating:</p>
+          {[1, 2, 3, 4, 5].map((star) => (
+            <span
+              key={star}
+              className={`star ${star <= (hoverRating || rating) ? "filled" : ""}`}
+              onClick={() => setRating(star)}
+              onMouseEnter={() => setHoverRating(star)}
+              onMouseLeave={() => setHoverRating(0)}
+            >
+              ★
+            </span>
+          ))}
+        </div>
+
+        <button type="submit">Submit Feedback</button>
+      </form>
+    </div>
+  );
+};
+
+export default FeedbackForm;