98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { apiFetch } from "@/app/lib/api-client";
|
|
|
|
interface NewsletterSubscribeProps {
|
|
locale: string;
|
|
citySlug?: string;
|
|
list?: "city" | "meetup" | "general";
|
|
className?: string;
|
|
}
|
|
|
|
const copy = {
|
|
zh: {
|
|
title: "订阅城市与活动通讯",
|
|
hint: "通过 Listmonk 接收新活动、城市更新（可随时退订）",
|
|
email: "邮箱地址",
|
|
name: "称呼（可选）",
|
|
submit: "订阅",
|
|
success: "订阅成功，请查收确认邮件",
|
|
error: "订阅失败，请稍后再试",
|
|
},
|
|
en: {
|
|
title: "Subscribe to city & event updates",
|
|
hint: "Get meetup and city news via Listmonk (unsubscribe anytime)",
|
|
email: "Email",
|
|
name: "Name (optional)",
|
|
submit: "Subscribe",
|
|
success: "Subscribed — check your inbox to confirm",
|
|
error: "Subscription failed, please try again",
|
|
},
|
|
};
|
|
|
|
export default function NewsletterSubscribe({
|
|
locale,
|
|
citySlug = "",
|
|
list = "general",
|
|
className = "",
|
|
}: NewsletterSubscribeProps) {
|
|
const c = locale === "zh" ? copy.zh : copy.en;
|
|
const [email, setEmail] = useState("");
|
|
const [name, setName] = useState("");
|
|
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!email.trim()) return;
|
|
setStatus("loading");
|
|
try {
|
|
await apiFetch("/api/newsletter/subscribe", {
|
|
method: "POST",
|
|
body: JSON.stringify({ email, name, citySlug, list }),
|
|
});
|
|
setStatus("success");
|
|
setEmail("");
|
|
setName("");
|
|
} catch {
|
|
setStatus("error");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className={`rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900 ${className}`}
|
|
>
|
|
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{c.title}</p>
|
|
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{c.hint}</p>
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-[1fr_1fr_auto]">
|
|
<input
|
|
type="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder={c.email}
|
|
className="rounded-xl border border-gray-200 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder={c.name}
|
|
className="rounded-xl border border-gray-200 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={status === "loading"}
|
|
className="rounded-xl bg-[#ff4d4f] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#ff7a45] disabled:opacity-60"
|
|
>
|
|
{c.submit}
|
|
</button>
|
|
</div>
|
|
{status === "success" ? <p className="mt-3 text-sm text-emerald-600 dark:text-emerald-400">{c.success}</p> : null}
|
|
{status === "error" ? <p className="mt-3 text-sm text-red-600 dark:text-red-400">{c.error}</p> : null}
|
|
</form>
|
|
);
|
|
}
|