mise a jour du frontend
This commit is contained in:
parent
618b740588
commit
9737caff99
9 changed files with 332 additions and 60 deletions
|
|
@ -64,40 +64,105 @@ export default function ContactComponent() {
|
|||
</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>
|
||||
<ContactForm />
|
||||
) : (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function ContactForm() {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [subject, setSubject] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (!name || !email || !message) {
|
||||
setError("Veuillez remplir les champs requis.");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("loading");
|
||||
try {
|
||||
const res = await fetch("/api/contact", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, email, subject, message }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const txt = await res.text();
|
||||
throw new Error(txt || "Erreur lors de l'envoi du message");
|
||||
}
|
||||
|
||||
setStatus("success");
|
||||
setName("");
|
||||
setEmail("");
|
||||
setSubject("");
|
||||
setMessage("");
|
||||
} catch (err: any) {
|
||||
setStatus("error");
|
||||
setError(err?.message || "Une erreur est survenue.");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="stack" noValidate>
|
||||
<div>
|
||||
<label htmlFor="name">Votre nom</label>
|
||||
<input id="name" name="name" type="text" required value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email">Votre email</label>
|
||||
<input id="email" name="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject">Sujet</label>
|
||||
<input id="subject" name="subject" type="text" placeholder="Prise de contact" value={subject} onChange={(e) => setSubject(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message">Message</label>
|
||||
<textarea id="message" name="message" required value={message} onChange={(e) => setMessage(e.target.value)} />
|
||||
</div>
|
||||
|
||||
{status === "success" ? (
|
||||
<p className="u-success">Votre message a bien été envoyé. Merci !</p>
|
||||
) : null}
|
||||
{status === "error" && error ? (
|
||||
<p className="u-error">{error}</p>
|
||||
) : null}
|
||||
|
||||
<div className="btn-group">
|
||||
<button type="submit" className="btn btn--primary btn--pill" disabled={status === "loading"}>
|
||||
{status === "loading" ? "Envoi…" : "Envoyer"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn--ghost"
|
||||
onClick={() => {
|
||||
setName("");
|
||||
setEmail("");
|
||||
setSubject("");
|
||||
setMessage("");
|
||||
setError(null);
|
||||
setStatus("idle");
|
||||
}}
|
||||
disabled={status === "loading"}
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,8 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Footer() {
|
||||
const [isTop, setIsTop] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setIsTop(window.scrollY <= 0);
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<footer className={isTop ? "sticky-footer" : "sticky-footer is-visible"}>
|
||||
<footer>
|
||||
<p>© 2025 - Toine</p>
|
||||
<p><small>Développé avec Python, JavaScript et React. Alimenté par Next.js.</small></p>
|
||||
<p><small>Développé avec Python, JavaScript et React. Alimenté par Next.js.</small></p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ export default function Header() {
|
|||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link href="/">Accueil</Link></li>
|
||||
<li><Link href="/projects" >Projets</Link></li>
|
||||
<li><Link href="/competences">Compétences</Link></li>
|
||||
<li><Link href="https://toinesensei.itch.io/" target="_blank">Itch.io</Link></li>
|
||||
<li><Link href="/contact">Contact</Link></li>
|
||||
<li><Link href="https://fr.malt.be/profile/anthonyviolet1" target="_blank">Malt</Link></li>
|
||||
<li><Link href="https://www.linkedin.com/in/anthony-violet/" target="_blank">LinkedIn</Link></li>
|
||||
<li><Link href="/contact">Contact</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="cta">
|
||||
|
|
@ -61,7 +61,7 @@ export default function Header() {
|
|||
>
|
||||
{theme === "dark" ? "☀️" : "🌙"}
|
||||
</button>
|
||||
<Link href="mailto:tonemail@domaine.com" className="button">Travaillons ensemble</Link>
|
||||
<Link href="mailto:violet.anthony90@gmail.com" className="button">Travaillons ensemble</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default async function Services() {
|
|||
<ul className="grid-3">
|
||||
{services.map((service: any) => (
|
||||
<li key={service.id} className="service-card card feature">
|
||||
<span className="feature__icon" aria-hidden="true" />
|
||||
<span className="feature__icon" aria-hidden="true"></span>
|
||||
<div>
|
||||
<h3 className="feature__title">{service.name}</h3>
|
||||
{"description" in service && service.description ? (
|
||||
|
|
|
|||
|
|
@ -9,9 +9,28 @@ async function GetSkills() {
|
|||
return res.json();
|
||||
}
|
||||
export default async function Skills(){
|
||||
const skills = await GetSkills();
|
||||
const data = await GetSkills();
|
||||
|
||||
// Support both array and object responses from the backend and merge all items if array
|
||||
let obj: Record<string, string[]> = {};
|
||||
if (Array.isArray(data)) {
|
||||
for (const item of data) {
|
||||
if (item && typeof item === "object") {
|
||||
for (const [category, items] of Object.entries(item as Record<string, unknown>)) {
|
||||
if (Array.isArray(items)) {
|
||||
obj[category] = [...(obj[category] ?? []), ...items.filter((x): x is string => typeof x === "string")];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Deduplicate items per category
|
||||
obj = Object.fromEntries(
|
||||
Object.entries(obj).map(([k, arr]) => [k, Array.from(new Set(arr))])
|
||||
);
|
||||
} else if (data && typeof data === "object") {
|
||||
obj = data as Record<string, string[]>;
|
||||
}
|
||||
|
||||
const obj: Record<string, string[]> = Array.isArray(skills) ? (skills[0] ?? {}) : {};
|
||||
const entries = Object.entries(obj) as [string, string[]][];
|
||||
|
||||
if (entries.length === 0) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue