48408d3079
Add services, videos, AI assistant, map/weather, gigs post, notifications settings, static legal pages, Google OAuth, payment router, real-user matching, newsletter, and content submission — all using nomadweb UI patterns. Co-authored-by: Cursor <cursoragent@cursor.com>
52 lines
2.3 KiB
TypeScript
52 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { api } from "@/lib/api";
|
|
import { useToast } from "@/lib/toast";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import type { ServiceItem } from "@/lib/types";
|
|
|
|
export default function ServicesClient({ services }: { services: ServiceItem[] }) {
|
|
const { toast } = useToast();
|
|
const { t } = useI18n();
|
|
const [form, setForm] = useState<Record<string, { name: string; email: string; message: string }>>({});
|
|
|
|
const submit = async (serviceId: string) => {
|
|
const f = form[serviceId];
|
|
if (!f?.name || !f?.email || !f?.message) return;
|
|
try {
|
|
await api.submitServiceLead(serviceId, f);
|
|
toast(t.services.leadOk, "success");
|
|
} catch {
|
|
toast(t.services.leadFail, "error");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="community-page">
|
|
<div className="container">
|
|
<nav className="detail-nav"><Link href="/">{t.common.backHome}</Link></nav>
|
|
<div className="section-header reveal">
|
|
<span className="section-tag">{t.services.tag}</span>
|
|
<h1>{t.services.title}</h1>
|
|
<p>{t.services.subtitle}</p>
|
|
</div>
|
|
<div className="join-grid">
|
|
{services.map((s) => (
|
|
<div key={s.id} className="join-card reveal">
|
|
<h3>{s.emoji} {s.title}</h3>
|
|
<p>{s.description}</p>
|
|
<p><strong>{s.price}</strong> · {s.provider}</p>
|
|
<input placeholder={t.services.name} value={form[s.id]?.name || ""} onChange={(e) => setForm({ ...form, [s.id]: { ...form[s.id], name: e.target.value, email: form[s.id]?.email || "", message: form[s.id]?.message || "" } })} />
|
|
<input type="email" placeholder={t.services.email} value={form[s.id]?.email || ""} onChange={(e) => setForm({ ...form, [s.id]: { ...form[s.id], email: e.target.value, name: form[s.id]?.name || "", message: form[s.id]?.message || "" } })} />
|
|
<textarea rows={3} placeholder={t.services.message} value={form[s.id]?.message || ""} onChange={(e) => setForm({ ...form, [s.id]: { ...form[s.id], message: e.target.value, name: form[s.id]?.name || "", email: form[s.id]?.email || "" } })} />
|
|
<button type="button" className="btn btn-primary btn-sm" onClick={() => submit(s.id)}>{t.services.inquire}</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|