106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Sprout } from "lucide-react"
|
|
|
|
const NEWSLETTER_API = "https://newsletter.jeffemmett.com/api/subscribe"
|
|
const LIST_UUID = "47c050ec-78b4-4f1b-b1d4-708664479685" // MycoFi list
|
|
|
|
export function NewsletterSignup() {
|
|
const [email, setEmail] = useState("")
|
|
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
|
|
const [message, setMessage] = useState("")
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!email) return
|
|
|
|
setStatus("loading")
|
|
|
|
try {
|
|
const response = await fetch(`${NEWSLETTER_API}/subscribe`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
email: email,
|
|
list_uuid: LIST_UUID,
|
|
}),
|
|
})
|
|
|
|
if (response.ok) {
|
|
setStatus("success")
|
|
setMessage("Merge in to the mesh. The mycelium remembers.")
|
|
setEmail("")
|
|
} else {
|
|
throw new Error("Subscription failed")
|
|
}
|
|
} catch {
|
|
setStatus("error")
|
|
setMessage("Something went wrong. Please try again.")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="py-16 bg-gradient-to-b from-background to-emerald-50/30 relative z-10">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-xl mx-auto text-center space-y-6">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-2 text-sm text-black">
|
|
<Sprout className="h-4 w-4 text-secondary" />
|
|
<span>Stay Connected</span>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h2
|
|
className="text-3xl font-bold"
|
|
style={{ fontFamily: "var(--font-crimson)" }}
|
|
>
|
|
Join the Mycelial Network
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
Subscribe for updates on regenerative economics, mycoeconomics research,
|
|
and building regenerative futures.
|
|
</p>
|
|
</div>
|
|
|
|
{status === "success" ? (
|
|
<div className="p-4 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-700">
|
|
{message}
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
|
|
<Input
|
|
type="email"
|
|
placeholder="your@email.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
disabled={status === "loading"}
|
|
className="px-6"
|
|
>
|
|
{status === "loading" ? "Subscribing..." : "Subscribe"}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
|
|
{status === "error" && (
|
|
<p className="text-sm text-red-500">{message}</p>
|
|
)}
|
|
|
|
<p className="text-xs text-muted-foreground">
|
|
No spam, unsubscribe anytime. We respect your privacy.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|