Skip to content

Commit 5426490

Browse files
Ojas13-gitOjas13-git
committed
Added a feedback card to explorer
1 parent 4d9421e commit 5426490

File tree

2 files changed

+138
-0
lines changed

2 files changed

+138
-0
lines changed

‎src/components/global/footer/FeedbackCard.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
// import React from 'react';
2+
// import { IoDocumentTextOutline } from "react-icons/io5";
3+
4+
5+
// const FeedbackCard = () => {
6+
// return (
7+
// <div className="m-16 mx-auto md:max-w-2xl lg:max-w-[749px] p-4">
8+
// <div className="rounded-xl border-2 lg:flex lg:items-center">
9+
// <div className=" sm:w-full sm:max-w-md py-8 px-6 lg:mt-0 lg:flex-1 lg:justify-center lg:items-center space-y-2">
10+
11+
// <p className="flex gap-2 items-center text-md sm:text-xl text-black">
12+
// <IoDocumentTextOutline />
13+
// Faced an Issue? Help us improve. </p>
14+
// <form method="post" className="space-y-4 sm:space-y-0 sm:flex sm:space-x-3">
15+
// <div className="w-full">
16+
// <label htmlFor="name" className="sr-only">Name</label>
17+
// <input
18+
// id="name"
19+
// type="text"
20+
// autoComplete="name"
21+
// className="w-full md:w-[300px] lg:w-[341px] rounded-md border-1 px-5 py-3 text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-700"
22+
// placeholder="Write Message"
23+
// />
24+
// </div>
25+
// <div className="w-full">
26+
// <label htmlFor="email-address" className="sr-only">Email address</label>
27+
// <input
28+
// id="email-address"
29+
// type="email"
30+
// autoComplete="email"
31+
// className="w-full md:w-[200px] lg:w-[220px] rounded-md border-1 px-5 py-3 text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-700"
32+
// placeholder="Your email"
33+
// />
34+
// </div>
35+
// <button
36+
// type="submit"
37+
// className="mt-3 flex w-full lg:w-[108px] items-center justify-center rounded-md bg-[#2c85df] px-5 py-3 text-base font-medium text-white hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-700 sm:mt-0 sm:w-auto"
38+
// >
39+
// Send
40+
// </button>
41+
// </form>
42+
43+
// </div>
44+
// </div>
45+
// </div>
46+
// );
47+
// }
48+
49+
// export default FeedbackCard;
50+
51+
52+
53+
import React, { useState } from 'react';
54+
import { IoDocumentTextOutline } from "react-icons/io5";
55+
56+
const FeedbackCard = () => {
57+
const [formData, setFormData] = useState({ message: '', email: '' });
58+
59+
const handleChange = (e: { target: { id: any; value: any; }; }) => {
60+
const { id, value } = e.target;
61+
setFormData({ ...formData, [id]: value });
62+
};
63+
64+
const handleSubmit = (e: { preventDefault: () => void; }) => {
65+
e.preventDefault();
66+
67+
const { message, email } = formData;
68+
69+
// Create a well-structured feedback message body
70+
const mailtoLink = `mailto:[email protected]?subject=Feedback&body=${encodeURIComponent(`
71+
Hello JiffyScan Team,
72+
73+
I hope you're doing well. I wanted to provide some feedback on your platform:
74+
75+
"${message}"
76+
77+
Thank you for taking the time to consider my input. Please feel free to reach out if you need more details.
78+
79+
Best regards,
80+
${email}
81+
`)}`;
82+
83+
// Open user's email client with pre-filled subject, body, and email address
84+
window.location.href = mailtoLink;
85+
};
86+
87+
return (
88+
<div className="m-16 mx-auto md:max-w-2xl lg:max-w-[749px] p-4">
89+
<div className="rounded-xl border-2 lg:flex lg:items-center">
90+
<div className="sm:w-full sm:max-w-md py-8 px-6 lg:mt-0 lg:flex-1 lg:justify-center lg:items-center space-y-2">
91+
<p className="flex gap-2 font-inter font-medium items-center text-md sm:text-xl text-black">
92+
<IoDocumentTextOutline />
93+
Faced an Issue? Help us improve.
94+
</p>
95+
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-0 sm:flex sm:space-x-3">
96+
<div className="w-full">
97+
<label htmlFor="message" className="sr-only">Message</label>
98+
<input
99+
id="message"
100+
type="text"
101+
value={formData.message}
102+
onChange={handleChange}
103+
className="w-full md:w-[300px] lg:w-[341px] rounded-md border-1 px-5 py-3 text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-700"
104+
placeholder="Write Message"
105+
required
106+
/>
107+
</div>
108+
<div className="w-full">
109+
<label htmlFor="email" className="sr-only">Email address</label>
110+
<input
111+
id="email"
112+
type="email"
113+
value={formData.email}
114+
onChange={handleChange}
115+
className="w-full md:w-[200px] lg:w-[220px] rounded-md border-1 px-5 py-3 text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-700"
116+
placeholder="Your email"
117+
required
118+
/>
119+
</div>
120+
<button
121+
type="submit"
122+
className="mt-3 flex w-full lg:w-[108px] items-center justify-center rounded-md bg-[#2c85df] px-5 py-3 text-base font-medium text-white hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-700 sm:mt-0 sm:w-auto"
123+
>
124+
Send
125+
</button>
126+
</form>
127+
</div>
128+
</div>
129+
</div>
130+
);
131+
}
132+
133+
export default FeedbackCard;

‎src/components/global/footer/Footer.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,13 @@ import Copyright from './Copyright';
77
import Donations from './Donations';
88
import pages from './pages.json';
99
import socials from './social.json';
10+
import FeedbackCard from './FeedbackCard';
11+
1012

1113
function Footer() {
1214
return (
15+
<>
16+
<FeedbackCard/>
1317
<footer className="bg-dark-600 py-8 md:py-12 text-white">
1418
<div className="container flex flex-col gap-8 md:gap-12">
1519
<div className=" flex md:flex-row flex-col md:justify-between md:items-center">
@@ -66,6 +70,7 @@ function Footer() {
6670
</div>
6771
</div>
6872
</footer>
73+
</>
6974
);
7075
}
7176

0 commit comments

Comments
 (0)