forked from UKSOURCE/ipv6
init
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
type IndustryOption = { value: string; label: string };
|
||||
|
||||
export default function RegistrationForm({
|
||||
data,
|
||||
}: {
|
||||
data: {
|
||||
sections: {
|
||||
personal: { title: string; fullName: string; phone: string; email: string };
|
||||
professional: { title: string; company: string; jobTitle: string };
|
||||
industry: { title: string; label: string; placeholder: string; options: IndustryOption[] };
|
||||
additional: { title: string; label: string; placeholder: string };
|
||||
};
|
||||
submit: { label: string; disclaimer: string };
|
||||
};
|
||||
}) {
|
||||
const industries = useMemo(() => data.sections.industry.options, [data.sections.industry.options]);
|
||||
const [form, setForm] = useState({
|
||||
fullName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
company: "",
|
||||
jobTitle: "",
|
||||
industry: "",
|
||||
notes: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
className="space-y-[32px]"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
// frontend-only scope
|
||||
console.log("[registration]", form);
|
||||
alert("Saved locally (frontend-only).");
|
||||
}}
|
||||
>
|
||||
<div className="space-y-[16px]">
|
||||
<h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
|
||||
{data.sections.personal.title}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
|
||||
<div className="space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.personal.fullName}</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
|
||||
placeholder="John Doe"
|
||||
value={form.fullName}
|
||||
onChange={(e) => setForm((s) => ({ ...s, fullName: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.personal.phone}</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
|
||||
placeholder="+84 ..."
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm((s) => ({ ...s, phone: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.personal.email}</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
|
||||
placeholder="john.doe@company.com"
|
||||
type="email"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm((s) => ({ ...s, email: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-white/5" />
|
||||
|
||||
<div className="space-y-[16px]">
|
||||
<h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
|
||||
{data.sections.professional.title}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
|
||||
<div className="space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.professional.company}</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
|
||||
placeholder="Company"
|
||||
value={form.company}
|
||||
onChange={(e) => setForm((s) => ({ ...s, company: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.professional.jobTitle}</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
|
||||
placeholder="Network Architect"
|
||||
value={form.jobTitle}
|
||||
onChange={(e) => setForm((s) => ({ ...s, jobTitle: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-white/5" />
|
||||
|
||||
<div className="space-y-[16px]">
|
||||
<h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
|
||||
{data.sections.industry.title}
|
||||
</h2>
|
||||
<div className="space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.industry.label}</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface appearance-none transition-all"
|
||||
value={form.industry}
|
||||
onChange={(e) => setForm((s) => ({ ...s, industry: e.target.value }))}
|
||||
>
|
||||
<option value="" disabled>
|
||||
{data.sections.industry.placeholder}
|
||||
</option>
|
||||
{industries.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-outline pointer-events-none">
|
||||
expand_more
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-white/5" />
|
||||
|
||||
<div className="space-y-[16px]">
|
||||
<h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
|
||||
{data.sections.additional.title}
|
||||
</h2>
|
||||
<div className="space-y-1">
|
||||
<label className="text-outline uppercase tracking-wider">{data.sections.additional.label}</label>
|
||||
<textarea
|
||||
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all resize-none"
|
||||
placeholder={data.sections.additional.placeholder}
|
||||
rows={4}
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm((s) => ({ ...s, notes: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-[16px]">
|
||||
<button
|
||||
className="w-full gold-gradient-bg py-5 rounded-lg text-on-primary font-[var(--font-display-lg)] text-[18px] font-bold shadow-[0_10px_30px_rgba(197,160,89,0.15)] hover:shadow-[0_15px_40px_rgba(197,160,89,0.25)] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all"
|
||||
type="submit"
|
||||
>
|
||||
{data.submit.label}
|
||||
</button>
|
||||
<p className="mt-[16px] text-center text-outline text-[11px] tracking-widest opacity-60 uppercase">
|
||||
{data.submit.disclaimer}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user