Added Rate-Us feature

package.json

@@ -43,6 +43,7 @@
     "react-slick": "^0.29.0",
     "react-toastify": "^10.0.5",
     "reactjs-image-zoom": "^1.0.8",
+    "reactstrap": "^9.2.2",
     "rn-range-slider": "^2.2.2",
     "styled-components": "^5.3.11",
     "uuidv4": "^6.2.13",

src/components/header/nav/nav.css

@@ -312,4 +312,82 @@ nav .all_menu li {
     border: 1px solid rgba(255, 255, 255, 0.125);
 
   }
-}
+}
+/* Navbar style to ensure it stays on top */
+.navbar {
+  position: relative;
+  z-index: 1050; /* Higher than the modal */
+}
+
+/* Common style for Contributors and Rate Us text */
+.common-style {
+  font-size: 16px; /* Example size */
+  font-family: Arial, sans-serif; /* Example font */
+  color: #000; /* Example color */
+}
+
+/* Rate Us text style */
+.rate-us-text {
+  font-size: 15px; /* Very small font size for Rate Us text */
+  font-family: Arial, sans-serif;
+  color: #000;
+  transition: color 0.3s ease;
+}
+
+.rate-us-text:hover {
+  color: #007bff; /* Change color on hover */
+}
+
+/* Modal style for creative effect */
+.rate-us-modal .modal-content {
+  border-radius: 10px;
+  animation: modalFadeIn 0.5s;
+  z-index: 1040; /* Lower than the navbar */
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Modal header style */
+.modal-header {
+  position: relative;
+}
+
+/* Modal header close button style */
+.modal-header .close.custom-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #000; /* Background color black */
+  color: #fff; /* Text color white */
+  border: none;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  padding: 0.25rem 0.5rem;
+  line-height: 1;
+  opacity: 1;
+}
+
+.star-selected {
+  color: gold;
+  transition: color 0.3s ease;
+}
+
+.stars {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+textarea {
+  border-radius: 5px;
+  padding: 10px;
+}

src/components/header/nav/nav.js

@@ -7,6 +7,8 @@ import GridViewIcon from '@mui/icons-material/GridView';
 import HeadphonesOutlinedIcon from '@mui/icons-material/HeadphonesOutlined';
 import { MyContext } from '../../../App';
 import { useSelector } from 'react-redux';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { FaStar } from 'react-icons/fa';
 
 //BROWSE ALL CATEGORY ICONS
 import milk from '../../../assets/images/milk.svg';
@@ -73,8 +75,24 @@ const Nav = (props) => {
     { id: 19, imgSrc: rice, text: 'Dals and pulses', link: '/dals-and-pulses' },
     { id: 20, imgSrc: diet, text: 'Diet Food', link: '/' }
   ];
-  //END OF CONTENT
 
+    const [modal, setModal] = useState(false);
+    const [rating, setRating] = useState(0);
+    const [feedback, setFeedback] = useState('');
+
+    const toggle = () => setModal(!modal);
+
+    const handleRating = (rate) => setRating(rate);
+
+    const handleSubmit = () => {
+      // Handle the submission logic here
+      console.log('Rating:', rating);
+      console.log('Feedback:', feedback);
+
+      // Close the modal
+      toggle();
+    };
+
   const [items, setItems] = useState(initialItems);
   const [expanded, setExpanded] = useState(false);
 
@@ -372,6 +390,49 @@ const Nav = (props) => {
                         Contributors
                       </NavLink>
                     </Button>
+                    <span
+        onClick={toggle}
+        className="rate-us-text"
+        style={{ cursor: 'pointer', marginLeft: '10px' }}
+      >
+        Rate Us
+      </span>
+
+      <Modal isOpen={modal} toggle={toggle} className="rate-us-modal">
+        <ModalHeader className="modal-header">
+          Rate Us
+          <button type="button" className="close custom-close" onClick={toggle}>
+            &times;
+          </button>
+        </ModalHeader>
+        <ModalBody>
+          <div className="stars">
+            {[...Array(5)].map((star, index) => (
+              <FaStar
+                key={index}
+                size={30}
+                onClick={() => handleRating(index + 1)}
+                className={index < rating ? 'star-selected' : ''}
+              />
+            ))}
+          </div>
+          <textarea
+            value={feedback}
+            onChange={(e) => setFeedback(e.target.value)}
+            placeholder="Leave your feedback here..."
+            rows="4"
+            style={{ width: '100%' }}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={handleSubmit}>
+            Submit
+          </Button>{' '}
+          <Button color="secondary" onClick={toggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
                   </li>
                 </ul>
 
@@ -411,5 +472,4 @@ const Nav = (props) => {
     </>
   );
 };
-
 export default Nav;