diff --git a/package-lock.json b/package-lock.json index 3dd64fc7..0462eb9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", + "react-toastify": "^8.0.0", "styled-components": "^6.1.11", "web-vitals": "^4.1.1" } @@ -18684,6 +18685,26 @@ "node": ">=10" } }, + "node_modules/react-toastify": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.0.0.tgz", + "integrity": "sha512-7a5uhwbJ5Ivp5QyJN8P9M8g+7wksJt51QuYAZW0c3pDOh0Jx8lH7XzNHzzJg4NHup9n4zcqH9rwXknnyzYg2OA==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/react-toastify/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -35343,6 +35364,21 @@ } } }, + "react-toastify": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.0.0.tgz", + "integrity": "sha512-7a5uhwbJ5Ivp5QyJN8P9M8g+7wksJt51QuYAZW0c3pDOh0Jx8lH7XzNHzzJg4NHup9n4zcqH9rwXknnyzYg2OA==", + "requires": { + "clsx": "^1.1.1" + }, + "dependencies": { + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + } + } + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index fe6411ba..255f8f88 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", + "react-toastify": "^8.0.0", "styled-components": "^6.1.11", "web-vitals": "^4.1.1" }, diff --git a/src/Components/footer_section/ContactUs/contact_us.js b/src/Components/footer_section/ContactUs/contact_us.js index 0406f5de..cd3e03db 100644 --- a/src/Components/footer_section/ContactUs/contact_us.js +++ b/src/Components/footer_section/ContactUs/contact_us.js @@ -2,8 +2,30 @@ import './contact_us.css'; import React from 'react'; import { Link } from 'react-router-dom'; import homeIcon from '../../../img/homeicon.png'; +import { ToastContainer, toast, Bounce } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + function ContactUs() { + const handleSubmit = (event) => { + event.preventDefault(); + // Perform form validation or any other logic here + + // Show success toast notification + toast.success('Sent Successfully!', { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: false, + draggable: true, + progress: undefined, + theme: "dark", + transition: Bounce, + }); + } + + return (
Use the form below to get in touch. We attempt to respond to support requests within 1 business day.
-