103 lines
No EOL
3.1 KiB
TypeScript
103 lines
No EOL
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
type ContactData = {
|
|
email?: string;
|
|
linkedin?: string;
|
|
github?: string;
|
|
};
|
|
|
|
export default function ContactComponent() {
|
|
const pathname = usePathname();
|
|
const onContactPage = pathname === "/contact";
|
|
|
|
const [data, setData] = useState<ContactData | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!onContactPage) return;
|
|
|
|
// Appelle l'API interne Next.js qui proxy vers le BACKEND_URL côté serveur
|
|
const url = "/api/contact";
|
|
|
|
fetch(url, { cache: "no-store" })
|
|
.then((res) => (res.ok ? res.json() : Promise.reject(new Error("fetch contact failed"))))
|
|
.then((json) => setData(json))
|
|
.catch(() => setData(null));
|
|
}, [onContactPage]);
|
|
|
|
// Si on n'est pas sur la page /contact => juste un lien
|
|
if (!onContactPage) {
|
|
return (
|
|
<div className="block">
|
|
<div className="btn-group">
|
|
<Link href="/contact" className="btn btn--primary btn--pill">
|
|
Me contacter
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Page /contact => liens + formulaire
|
|
return (
|
|
<div className="block">
|
|
<div className="stack">
|
|
<div className="btn-group">
|
|
{data?.linkedin ? (
|
|
<a href={data.linkedin} target="_blank" rel="noopener noreferrer" className="link-button">
|
|
LinkedIn
|
|
</a>
|
|
) : null}
|
|
{data?.github ? (
|
|
<a href={data.github} target="_blank" rel="noopener noreferrer" className="link-button">
|
|
GitHub
|
|
</a>
|
|
) : null}
|
|
{data?.email ? (
|
|
<a href={`mailto:${data.email}`} className="link-button">
|
|
Email direct
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
|
|
{data?.email ? (
|
|
<form action={`mailto:${data.email}`} method="post" encType="text/plain" className="stack">
|
|
<div>
|
|
<label htmlFor="name">Votre nom</label>
|
|
<input id="name" name="Nom" type="text" required />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email">Votre email</label>
|
|
<input id="email" name="Email" type="email" required />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="subject">Sujet</label>
|
|
<input id="subject" name="Sujet" type="text" placeholder="Prise de contact" />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="message">Message</label>
|
|
<textarea id="message" name="Message" required />
|
|
</div>
|
|
|
|
<div className="btn-group">
|
|
<button type="submit" className="btn btn--primary btn--pill">
|
|
Envoyer
|
|
</button>
|
|
<button type="reset" className="btn btn--ghost">
|
|
Réinitialiser
|
|
</button>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<p className="u-muted">Une erreur est survenue. Vous pouvez tout de même me contacter directement par email : <a href="mailto:violet.anthony90@gmail.com">Me joindre par email</a></p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |