ayrisdev/moybeach-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement public contact and reservation forms connected to DB

Browse Source
This commit is contained in:
mstfyldz
2026-06-05 17:45:15 +03:00
parent a9a2c08e5f
commit 744283f167
3 changed files with 183 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Contact.tsx
+73 -14
View File
@@ -1,8 +1,30 @@
"use client";
import { MapPin, Phone, Mail, Clock } from "lucide-react";
import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";
import { useState } from "react";
import { submitContactMessage } from "@/app/actions";
export default function Contact({ dict, dbSettings }: { dict: any, dbSettings?: any }) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [status, setStatus] = useState<{ type: 'success' | 'error', message: string } | null>(null);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
setStatus(null);
const formData = new FormData(e.currentTarget);
const result = await submitContactMessage(formData);
if (result.error) {
setStatus({ type: 'error', message: result.error });
} else {
setStatus({ type: 'success', message: 'Mesajınız başarıyla gönderildi. En kısa sürede dönüş yapacağız.' });
(e.target as HTMLFormElement).reset();
}
setIsSubmitting(false);
};
return (
<section id="contact" className="py-24 bg-sand-light text-sea-dark relative">
<div className="container mx-auto px-6 max-w-7xl">
@@ -11,7 +33,7 @@ export default function Contact({ dict, dbSettings }: { dict: any, dbSettings?:
<h3 className="text-4xl md:text-5xl font-serif">{dict.contact.heading}</h3>
</div>
<div className="grid lg:grid-cols-2 gap-12 items-start">
<div className="grid lg:grid-cols-2 gap-12 items-start mb-16">
{/* İletişim Bilgileri */}
<div className="space-y-8">
@@ -69,21 +91,58 @@ export default function Contact({ dict, dbSettings }: { dict: any, dbSettings?:
</div>
</div>
{/* Google Maps Embed */}
<div className="w-full h-[400px] lg:h-full min-h-[400px] bg-gray-200 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<iframe
src="https://maps.google.com/maps?hl=tr&gl=TR&cid=17585469489776666725&output=embed"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen={false}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Moy Beach Konum"
/>
{/* İletişim Formu */}
<div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
<h4 className="font-bold text-2xl mb-6 font-serif">Bize Ulaşın</h4>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Adınız Soyadınız</label>
<input type="text" name="name" required className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors" placeholder="Adınız Soyadınız" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">E-Posta Adresi</label>
<input type="email" name="email" required className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors" placeholder="ornek@email.com" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Konu</label>
<input type="text" name="subject" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors" placeholder="Konu (İsteğe bağlı)" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Mesajınız</label>
<textarea name="message" required rows={4} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors resize-none" placeholder="Mesajınızı buraya yazabilirsiniz..." />
</div>
{status && (
<div className={`p-4 rounded-xl text-sm ${status.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
{status.message}
</div>
)}
<button type="submit" disabled={isSubmitting} className="w-full bg-sea-dark hover:bg-sea text-white font-medium py-4 rounded-xl transition-colors shadow-md hover:shadow-lg flex items-center justify-center gap-2 disabled:opacity-70">
<Send className="w-5 h-5" />
{isSubmitting ? 'Gönderiliyor...' : 'Mesajı Gönder'}
</button>
</form>
</div>
</div>
{/* Google Maps Embed */}
<div className="w-full h-[400px] bg-gray-200 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<iframe
src="https://maps.google.com/maps?hl=tr&gl=TR&cid=17585469489776666725&output=embed"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen={false}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Moy Beach Konum"
/>
</div>
</div>
</section>
);