79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { MailIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
const Footer = () => {
|
|
const [email, setEmail] = useState("");
|
|
|
|
const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (event.key === "Enter") {
|
|
send_newsletter();
|
|
}
|
|
}
|
|
|
|
const send_newsletter = async () => {
|
|
if (email) {
|
|
if (email.trim() === "") return;
|
|
try {
|
|
const response = await fetch(`/api/send_newsletter/${email}`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to subscribe");
|
|
}
|
|
|
|
setEmail("");
|
|
alert("Successfully added to newsletter");
|
|
|
|
} catch (error) {
|
|
console.error("Error subscribing:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<footer className="absolute bottom-0 h-[12vh] w-full p-4 bg-gradient-to-b from-white/0 via-[#3a0ca3]/50 to-[#3a0ca3] text-white">
|
|
<div className="flex flex-wrap justify-between gap-x-10 gap-y-6">
|
|
{/* About Section */}
|
|
<div className="flex-1 min-w-[250px]">
|
|
<h2 className="text-2xl font-bold">Gander</h2>
|
|
</div>
|
|
|
|
{/* Office Section */}
|
|
<div className="flex-1 min-w-[200px]">
|
|
<h3 className="text-lg font-semibold mb-2">Contact Us!</h3>
|
|
<a href="mailto:response.gander@gmail.com" className="underline">
|
|
response.gander@gmail.com
|
|
</a>
|
|
</div>
|
|
|
|
{/* Newsletter Section */}
|
|
<div className="flex-1 min-w-[250px]">
|
|
<h3 className="text-lg font-semibold mb-2">Newsletter</h3>
|
|
<div className="flex items-center border-b border-white py-2">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
className="bg-transparent outline-none text-sm flex-1 px-2"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<MailIcon className="text-white cursor-pointer" onClick={send_newsletter} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Bottom */}
|
|
<div className="text-center text-xs border-t border-gray-600 mt-6 pt-4">
|
|
Group 11
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer; |