diff --git a/frontend/src/Component/Modal.js b/frontend/src/Component/Modal.js
new file mode 100644
index 00000000..98146e91
--- /dev/null
+++ b/frontend/src/Component/Modal.js
@@ -0,0 +1,22 @@
+// Modal.jsx
+import React from 'react';
+import "./../style/Modal.css";
+
+function Modal({ isOpen, onClose, children }) {
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
+
+ {children}
+
+
+ );
+}
+
+export default Modal;
diff --git a/frontend/src/Component/Navbar/NavbarCenter.js b/frontend/src/Component/Navbar/NavbarCenter.js
index b4cdda11..b78b2ca3 100644
--- a/frontend/src/Component/Navbar/NavbarCenter.js
+++ b/frontend/src/Component/Navbar/NavbarCenter.js
@@ -1,10 +1,18 @@
-import React from "react";
+// NavbarCenter.jsx
+import React, { useState } from "react";
import { useSelector } from "react-redux";
import "../../style/Navbar.css";
import NavbarItem from "./NavbarItem";
+import Modal from "../../Component/Modal";
+import RateUsComponent from "../../Component/Rateus"; // Import the RateUsComponent
function NavbarCenter() {
const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0;
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const handleRateUsClick = () => {
+ setIsModalOpen(true);
+ };
return (
);
}
diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js
new file mode 100644
index 00000000..f5763941
--- /dev/null
+++ b/frontend/src/Component/Rateus.js
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import "./../style/Rateus.css";
+
+function RateUsComponent({ previousContent }) {
+ const [rating, setRating] = useState(0);
+ const [feedback, setFeedback] = useState("");
+ const [showModal, setShowModal] = useState(false);
+
+ const handleStarClick = (star) => {
+ setRating(star);
+ };
+
+ const handleFeedbackChange = (e) => {
+ setFeedback(e.target.value);
+ };
+
+ const handleSubmit = () => {
+ // Reset the state after submitting
+ setRating(0);
+ setFeedback("");
+ setShowModal(false); // Hide the modal after submitting
+ };
+
+ return (
+ <>
+
+
+
Rate Our Website
+
+ {[1, 2, 3, 4, 5].map((star) => (
+ handleStarClick(star)}
+ >
+ ★
+
+ ))}
+
+
+
+
+
+ >
+ );
+}
+
+export default RateUsComponent;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 49f302f9..a499d339 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,5 +1,5 @@
import React from "react";
-import ReactDOM from "react-dom/client";
+import ReactDOM from "react-dom";
import "./index.css";
import { Provider } from "react-redux";
import store from "./Store/store";
@@ -7,11 +7,8 @@ import Darkmode from "darkmode-js";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import App from "./App";
-
import { BrowserRouter } from "react-router-dom";
-import { BrowserRouter } from "react-router-dom"; // Ensure BrowserRouter is imported here
-
const root = ReactDOM.createRoot(document.getElementById("root"));
const options = {
@@ -32,12 +29,9 @@ darkmode.showWidget();
root.render(
-
-
- {/* Ensure BrowserRouter is only here */}
-
+ {/* */}
diff --git a/frontend/src/pages/CodingPlatform.jsx b/frontend/src/pages/CodingPlatform.jsx
index a61d587a..9bd3bd81 100644
--- a/frontend/src/pages/CodingPlatform.jsx
+++ b/frontend/src/pages/CodingPlatform.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
const CodingPlatform = () => {
return (
diff --git a/frontend/src/style/Modal.css b/frontend/src/style/Modal.css
new file mode 100644
index 00000000..4df47619
--- /dev/null
+++ b/frontend/src/style/Modal.css
@@ -0,0 +1,38 @@
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(239, 234, 234, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ padding: 30px;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(168, 158, 158, 0.25);
+ color: rgb(19, 8, 26); /* Ensure text is purple */
+ position: relative;
+}
+
+.close-buttoned {
+ position: absolute;
+ top: 0px;
+ right: 5px;
+ width: 50px;
+ height: 50px;
+ background-color: black; /* Change to black */
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ cursor: pointer;
+ color: white;
+ border: none; /* Remove the border */
+ outline: none; /* Remove the default outline */
+}
diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css
index 0f533316..aa223d62 100644
--- a/frontend/src/style/Navbar.css
+++ b/frontend/src/style/Navbar.css
@@ -106,7 +106,7 @@
}
.navbar-left #nav-icon1 {
- width: 40px;
+ width: 30px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css
new file mode 100644
index 00000000..d0c1a511
--- /dev/null
+++ b/frontend/src/style/Rateus.css
@@ -0,0 +1,59 @@
+.rate-us-page {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.rate-us-container {
+ width: 70%;
+ max-width: 600px;
+ padding: 20px;
+ border: 1px solid #210202;
+ border-radius: 5px;
+ background-color: black;
+}
+
+.rate-us-heading {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #7c1de2;
+}
+
+.star-rating {
+ margin-bottom: 20px;
+}
+
+.star {
+ font-size: 24px;
+ color: #f0fafd;
+ cursor: pointer;
+}
+
+.filled {
+ color: #f7b731;
+}
+
+.feedback-textarea {
+ width: 100%;
+ height: 180px;
+ padding: 10px;
+ border: 1px solid #060404;
+ border-radius: 5px;
+ resize: none;
+ margin-bottom: 20px;
+}
+
+.submit-button {
+ width: 30%;
+ padding: 10px;
+ background-color: #7c1de2;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.submit-button:hover {
+ background-color: #5f129f;
+}