From 700839e520c89b65ddc799857e2072f427a39a55 Mon Sep 17 00:00:00 2001 From: RS Date: Fri, 4 Oct 2024 04:49:36 +0530 Subject: [PATCH 1/2] all --- src/components/ui/Footer.module.css | 4 +- src/components/ui/Footer.tsx | 146 ++++++++++++++++++---------- src/pages/api/subscribe.ts | 45 +++++++++ 3 files changed, 143 insertions(+), 52 deletions(-) create mode 100644 src/pages/api/subscribe.ts diff --git a/src/components/ui/Footer.module.css b/src/components/ui/Footer.module.css index fa95a07..64512f3 100644 --- a/src/components/ui/Footer.module.css +++ b/src/components/ui/Footer.module.css @@ -75,7 +75,7 @@ outline: none; } -.newsletter-right-container > .newsletter-email-container > form > p{ +.newsletter-right-container > .newsletter-email-container > form > button{ color: white; height: 3rem; font-size: 1rem; @@ -86,7 +86,7 @@ box-shadow: 0 .7065919983928324px .7065919983928324px -.625px #00000026,0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,0 30px 30px -3.75px #0000000d; } -.newsletter-right-container > .newsletter-email-container > form > p:hover{ +.newsletter-right-container > .newsletter-email-container > form > button:hover{ background-color: var(--slate-black); cursor: pointer; } diff --git a/src/components/ui/Footer.tsx b/src/components/ui/Footer.tsx index 1d3e0c3..41ffc2f 100644 --- a/src/components/ui/Footer.tsx +++ b/src/components/ui/Footer.tsx @@ -1,54 +1,100 @@ -import styles from "./Footer.module.css" +"use client"; + +import { useState } from 'react'; +import styles from "./Footer.module.css"; import Link from "next/link"; export default function Footer() { - return ( - - ); + const [email, setEmail] = useState(''); + const [message, setMessage] = useState(''); + const [loading, setLoading] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setMessage(''); + setLoading(true); + + try { + const res = await fetch('/api/subscribe', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ email }), // Only send the email + }); + + const data = await res.json(); + + if (res.status === 200) { + setMessage('Thank you for subscribing! A welcome email has been sent.'); + } else { + setMessage(data.error || 'Something went wrong'); + } + } catch (error) { + console.error(error); + setMessage('Something went wrong'); + } finally { + setLoading(false); + } + }; + + return ( +
+
+
+

Join the newsletter

+

Get the latest insights and updates straight to your inbox.

+
+
+
+
+ setEmail(e.target.value)} + required + /> + +
+ {message &&

{message}

} +
+

Your privacy is important. We never share your email.

+
+
+ + {/* Footer bottom section */} +
+ {/* Left part of the footer */} +
+

UTTARAKHAND CULTURE

+

Our aim is to ensure that this invaluable heritage is passed down to future generations.

+
+ + {/* Right part of the footer */} +
+
+

Socials

+ LinkedIn + Github + Contact us +
+
+

Contribution

+ Issues + About us + Contribution +
+
+
+ + {/* Copyright section */} +
+

© 2024 Uttarakhand Culture. All rights reserved.

+
+
+ ); } diff --git a/src/pages/api/subscribe.ts b/src/pages/api/subscribe.ts new file mode 100644 index 0000000..a44fedf --- /dev/null +++ b/src/pages/api/subscribe.ts @@ -0,0 +1,45 @@ +import nodemailer from 'nodemailer'; +import type { NextApiRequest, NextApiResponse } from 'next'; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + if (req.method === 'POST') { + const { email } = req.body; // Only expect the email + + if (!email) { + return res.status(400).json({ error: 'Missing email' }); + } + + try { + // Configure Nodemailer transport (SMTP settings) + const transporter = nodemailer.createTransport({ + host: 'smtp.gmail.com', + port: 587, + secure: false, + auth: { + user: process.env.SMTP_USER, + pass: process.env.SMTP_PASSWORD, + }, + }); + + // Email data + const mailOptions = { + from: process.env.SMTP_USER, + to: email, + subject: 'Welcome to our Uttarakhand Culture Newsletter!', + text: 'Thank you for subscribing to our Uttarakhand Culture! Stay tuned for updates...', + html: '

Thank you for subscribing to our newsletter! Stay tuned for updates.

', + }; + + // Send email + await transporter.sendMail(mailOptions); + res.status(200).json({ message: 'Email sent successfully' }); + + } catch (error) { + console.error('Error sending email:', error); + res.status(500).json({ error: 'Error sending email' }); + } + + } else { + res.status(405).json({ message: 'Method not allowed' }); + } +} From 21cfb58f4516876cf55f259c3fa2d4893bfa5b34 Mon Sep 17 00:00:00 2001 From: RS Date: Fri, 4 Oct 2024 04:53:33 +0530 Subject: [PATCH 2/2] finall --- src/components/ui/Footer.tsx | 2 +- src/pages/api/subscribe.ts | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/ui/Footer.tsx b/src/components/ui/Footer.tsx index 41ffc2f..d5d2517 100644 --- a/src/components/ui/Footer.tsx +++ b/src/components/ui/Footer.tsx @@ -20,7 +20,7 @@ export default function Footer() { headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify({ email }), // Only send the email + body: JSON.stringify({ email }), }); const data = await res.json(); diff --git a/src/pages/api/subscribe.ts b/src/pages/api/subscribe.ts index a44fedf..4feff29 100644 --- a/src/pages/api/subscribe.ts +++ b/src/pages/api/subscribe.ts @@ -3,14 +3,13 @@ import type { NextApiRequest, NextApiResponse } from 'next'; export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === 'POST') { - const { email } = req.body; // Only expect the email + const { email } = req.body; if (!email) { return res.status(400).json({ error: 'Missing email' }); } try { - // Configure Nodemailer transport (SMTP settings) const transporter = nodemailer.createTransport({ host: 'smtp.gmail.com', port: 587, @@ -21,7 +20,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) }, }); - // Email data const mailOptions = { from: process.env.SMTP_USER, to: email, @@ -30,7 +28,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) html: '

Thank you for subscribing to our newsletter! Stay tuned for updates.

', }; - // Send email + await transporter.sendMail(mailOptions); res.status(200).json({ message: 'Email sent successfully' });