You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
2.2 KiB
57 lines
2.2 KiB
"use client";
|
|
|
|
import React from "react";
|
|
import type { ContactData } from "../types";
|
|
|
|
interface ContactSectionProps {
|
|
data: ContactData;
|
|
}
|
|
|
|
export function ContactSection({ data }: ContactSectionProps) {
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// 表单提交逻辑
|
|
};
|
|
|
|
return (
|
|
<section id="contact" className="py-10 md:py-14 border-t border-[rgba(255,255,255,0.02)]">
|
|
<div className="max-w-[1200px] mx-auto px-4 md:px-6">
|
|
<div className="flex flex-col lg:flex-row gap-4 md:gap-6 items-start">
|
|
<div className="flex-1">
|
|
<h3 className="text-white mb-4 font-semibold">{data.title}</h3>
|
|
<p className="text-huilong-muted">{data.address}</p>
|
|
</div>
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="flex flex-col gap-2.5 max-w-[420px] w-full lg:w-auto"
|
|
>
|
|
<label className="text-huilong-muted text-sm">{data.formLabel}</label>
|
|
<input
|
|
type="text"
|
|
placeholder={data.formPlaceholders.name}
|
|
className="bg-transparent border border-[rgba(255,255,255,0.04)] px-2.5 py-2.5 rounded-md text-white placeholder:text-huilong-muted focus:outline-none focus:border-huilong-gold/50"
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder={data.formPlaceholders.email}
|
|
className="bg-transparent border border-[rgba(255,255,255,0.04)] px-2.5 py-2.5 rounded-md text-white placeholder:text-huilong-muted focus:outline-none focus:border-huilong-gold/50"
|
|
/>
|
|
<textarea
|
|
placeholder={data.formPlaceholders.message}
|
|
rows={4}
|
|
className="bg-transparent border border-[rgba(255,255,255,0.04)] px-2.5 py-2.5 rounded-md text-white placeholder:text-huilong-muted focus:outline-none focus:border-huilong-gold/50 resize-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="inline-block px-[18px] py-3 rounded-lg bg-huilong-gold text-huilong-bg font-semibold cursor-pointer hover:opacity-90 transition-opacity"
|
|
>
|
|
{data.submit}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|