From 74c0a483d44cc0066cb3786e040b7091f4f790b6 Mon Sep 17 00:00:00 2001 From: MuraliDharan7 Date: Wed, 3 Jul 2024 14:27:43 +0530 Subject: [PATCH] Added Rate-Us feature --- package-lock.json | 42 ++++++++++++++++ package.json | 1 + src/components/header/nav/nav.css | 80 ++++++++++++++++++++++++++++++- src/components/header/nav/nav.js | 64 ++++++++++++++++++++++++- 4 files changed, 184 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 19a79fc..546cccd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,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", @@ -17534,6 +17535,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, "node_modules/react-hook-form": { "version": "7.51.4", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz", @@ -17568,6 +17575,7 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "license": "MIT", "peerDependencies": { "react": "*" } @@ -17643,6 +17651,21 @@ "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0" } }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "license": "MIT", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-range-slider-input": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/react-range-slider-input/-/react-range-slider-input-3.0.7.tgz", @@ -17708,6 +17731,7 @@ "version": "6.24.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.0.tgz", "integrity": "sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==", + "license": "MIT", "dependencies": { "@remix-run/router": "1.17.0", "react-router": "6.24.0" @@ -17852,6 +17876,24 @@ "react-dom": "^18.2.0" } }, + "node_modules/reactstrap": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.2.tgz", + "integrity": "sha512-4KroiGOdqZLAnMGzHjpErW3G7bLB+QbKzzMLIDXydPIV0y74lpdL7WtXHkLWAGInd97WCPNx4+R0NQDPyzIfhw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.6.0", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^2.2.4", + "react-transition-group": "^4.4.2" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 7ca4170..8946c11 100644 --- a/package.json +++ b/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", diff --git a/src/components/header/nav/nav.css b/src/components/header/nav/nav.css index 850639c..94f7da6 100644 --- a/src/components/header/nav/nav.css +++ b/src/components/header/nav/nav.css @@ -312,4 +312,82 @@ nav .all_menu li { border: 1px solid rgba(255, 255, 255, 0.125); } -} \ No newline at end of file +} +/* 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; +} diff --git a/src/components/header/nav/nav.js b/src/components/header/nav/nav.js index 41086a1..4f0cf4c 100644 --- a/src/components/header/nav/nav.js +++ b/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 + + Rate Us + + + + + Rate Us + + + +
+ {[...Array(5)].map((star, index) => ( + handleRating(index + 1)} + className={index < rating ? 'star-selected' : ''} + /> + ))} +
+