Skip to content

toastify-pop-added #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

toastify-pop-added #143

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd3e0ab
toastify-popadded
Che140401 May 24, 2024
5242b5a
message changed
Che140401 May 25, 2024
2c53b29
Merge branch 'main' into chetan-branch
Che140401 May 25, 2024
7e2896a
Update ContactPage.jsx
Che140401 May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 80 additions & 63 deletions src/Pages/ContactPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,95 @@
import React from "react";
import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";
import BackBtn from "../components/BackBtn/BackBtn";

function ContactPage() {

const handleSubmit = (e) => {
e.preventDefault();

// Trigger a Toastify notification
Toastify({
text: "Message sent successfully!",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace the text to "Thanks for contacting us. We care for you and will get back to you soon !"

duration: 3000, // Duration in milliseconds
close: true,
gravity: "bottom", // `top` or `bottom`
position: "right", // `left`, `center` or `right`
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true, // Prevents dismissing of toast on hover
}).showToast();
};

return (
<>
<div className="py-8 mb-5 flex w-[50vw] justify-start ml-auto mr-auto mt-10">
<div>
<BackBtn Page={"Contact"} />
</div>
</div>
<div>
<form className="bg-white contact">
<div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
<h2 className="mb-4 text-4xl font-extrabold text-center text-green-500">
Contact Us
</h2>
<p className="mb-8 lg:mb-16 font-light text-center text-gray-500 contact-para">
Got a technical issue? Want to send feedback about a beta feature?
Need details about our Business plan? Let us know.
</p>
<form action="#" className="space-y-8">
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your email
</label>
<input
type="email"
id="email"
className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
placeholder="[email protected]"
required
/>
</div>
<div>
<label
htmlFor="subject"
className="block mb-2 text-sm font-medium text-gray-900"
>
Subject
</label>
<input
type="text"
id="subject"
className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500"
placeholder="Let us know how we can help you"
required
/>
</div>
<div className="sm:col-span-2">
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your message
</label>
<textarea
id="message"
rows="6"
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500"
placeholder="Leave a comment..."
></textarea>
</div>
<button
type="submit"
className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg sm:w-fit bg-green-600 focus:ring-4 focus:outline-none focus:ring-primary-300"
<div className="bg-white contact">
<div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
<h2 className="mb-4 text-4xl font-extrabold text-center text-green-500">
Contact Us
</h2>
<p className="mb-8 lg:mb-16 font-light text-center text-gray-500 contact-para">
Got a technical issue? Want to send feedback about a beta feature?
Need details about our Business plan? Let us know.
</p>
<form onSubmit={handleSubmit} className="space-y-8">
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900"
>
Send message
</button>
</form>
</div>
</form>
Your email
</label>
<input
type="email"
id="email"
className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
placeholder="[email protected]"
required
/>
</div>
<div>
<label
htmlFor="subject"
className="block mb-2 text-sm font-medium text-gray-900"
>
Subject
</label>
<input
type="text"
id="subject"
className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500"
placeholder="Let us know how we can help you"
required
/>
</div>
<div className="sm:col-span-2">
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your message
</label>
<textarea
id="message"
rows="6"
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500"
placeholder="Leave a comment..."
required
></textarea>
</div>
<button
type="submit"
className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg sm:w-fit bg-green-600 focus:ring-4 focus:outline-none focus:ring-primary-300"
>
Send message
</button>
</form>
</div>
</div>
</>
);
Expand Down