From 6bb03737b067b730b62a10da352866ed63ee92ee Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Fri, 5 Jul 2024 19:06:10 +0530 Subject: [PATCH 1/7] Made Footer Responsive --- package-lock.json | 61 +++++++++++++++-- package.json | 1 + src/components/Footer.jsx | 135 +++++++++++++++++++++++--------------- 3 files changed, 138 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index cba3b44..41225e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react-dom": "^18.2.0", "react-icons": "^5.2.1", "react-joyride": "^2.8.1", + "react-modal": "^3.16.1", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" @@ -1392,11 +1393,13 @@ } }, "node_modules/braces": { - "version": "3.0.2", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "license": "MIT", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -2488,6 +2491,12 @@ "node": ">=0.10.0" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==", + "license": "BSD-3-Clause" + }, "node_modules/fabric": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/fabric/-/fabric-5.3.0.tgz", @@ -2568,7 +2577,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "license": "MIT", "dependencies": { @@ -3296,6 +3307,8 @@ }, "node_modules/is-number": { "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true, "license": "MIT", "engines": { @@ -4658,6 +4671,31 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "license": "MIT" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "license": "MIT", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "dev": true, @@ -5612,6 +5650,8 @@ }, "node_modules/to-regex-range": { "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, "license": "MIT", "dependencies": { @@ -5922,6 +5962,15 @@ "node": ">=12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", @@ -6213,9 +6262,9 @@ "license": "ISC" }, "node_modules/ws": { - "version": "8.17.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz", - "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "license": "MIT", "optional": true, "engines": { diff --git a/package.json b/package.json index 733315a..6a0b73a 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-dom": "^18.2.0", "react-icons": "^5.2.1", "react-joyride": "^2.8.1", + "react-modal": "^3.16.1", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 6c0c05a..ac8c95d 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,3 +1,5 @@ +import React, { useState } from 'react'; +import Modal from 'react-modal'; import { AiFillHome, AiOutlineInfoCircle, AiOutlineMessage, AiOutlineTeam } from 'react-icons/ai'; import { FaNewspaper } from 'react-icons/fa'; import { FiMail } from 'react-icons/fi'; @@ -5,90 +7,117 @@ import { FiMail } from 'react-icons/fi'; import LinkedInIcon from "../assets/images/linkedin.jpg"; import TwitterIcon from "../assets/images/X.png"; import GitHubIcon from "../assets/images/github.png"; -import EmailIcon from "../assets/images/GMail.webp"; + +Modal.setAppElement('#root'); // Ensure this line is correct for accessibility const Footer = () => { + const [modalIsOpen, setModalIsOpen] = useState(false); + const [modalContent, setModalContent] = useState(''); + + const openModal = (content) => { + setModalContent(content); + setModalIsOpen(true); + }; + + const closeModal = () => { + setModalIsOpen(false); + setModalContent(''); + }; + return ( -