admin/softclick-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract contact form

Browse Source
This commit is contained in:
Zotov Ivan Yuryevich
2026-04-21 21:51:27 +03:00
parent 08f1e352a6
commit c9a199da91
3 changed files with 289 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/sections/Contact.tsx
View File

@@ -1,11 +1,14 @@
import { SiteContactItems } from '../components/SiteContactItems'
import { ContactForm, type ContactFormField, type ContactFormValues } from '../components/ContactForm'
import type { SiteConfigContact } from '../lib/cms/contact/types'
export interface ContactProps {
contacts: readonly SiteConfigContact[]
formVisibleFields?: readonly ContactFormField[]
formPrefillValues?: Partial<ContactFormValues>
}
export function Contact({ contacts }: ContactProps) {
export function Contact({ contacts, formVisibleFields, formPrefillValues }: ContactProps) {
return (
<section className="py-4 bg-gray-50">
<div className="max-w-225 mx-auto px-6">
@@ -17,69 +20,11 @@ export function Contact({ contacts }: ContactProps) {
{/* Форма */}
<div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
<form className="space-y-5">
<div className="grid md:grid-cols-2 gap-5">
<div>
<input
type="text"
id="name"
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
placeholder="Ваше имя"
required
/>
</div>
<div>
<input
type="text"
id="company"
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
placeholder="Компания"
/>
</div>
</div>
<div className="grid md:grid-cols-2 gap-5">
<div>
<input
type="email"
id="email"
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
placeholder="Email"
required
/>
</div>
<div>
<input
type="tel"
id="phone"
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
placeholder="Телефон"
required
/>
</div>
</div>
<div>
<textarea
id="message"
rows={4}
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all resize-none"
placeholder="Расскажите о вашем проекте"
></textarea>
</div>
<div className="flex flex-col sm:flex-row items-center gap-4">
<button
type="submit"
className="w-full sm:w-auto px-8 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all"
>
Отправить заявку
</button>
<p className="text-sm text-gray-500">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности</p>
</div>
</form>
<ContactForm
idPrefix="contact-section-form"
visibleFields={formVisibleFields}
prefillValues={formPrefillValues}
/>
</div>
<SiteContactItems