b
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { AboutSection } from "@prisma/client";
|
||||
import { Save } from "lucide-react";
|
||||
import { updateAboutSection } from "@/app/actions/about";
|
||||
|
||||
export default function AboutForm({ trData, enData }: { trData: AboutSection | null, enData: AboutSection | null }) {
|
||||
const [activeTab, setActiveTab] = useState<"tr" | "en">("tr");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
||||
|
||||
const handleSubmit = async (formData: FormData) => {
|
||||
setMessage(null);
|
||||
formData.append("lang", activeTab);
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await updateAboutSection(null, formData);
|
||||
if (result?.error) {
|
||||
setMessage({ type: 'error', text: result.error });
|
||||
} else if (result?.success) {
|
||||
setMessage({ type: 'success', text: result.message });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const activeData = activeTab === "tr" ? trData : enData;
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fade-up">
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-100 bg-gray-50/50 p-2">
|
||||
<button
|
||||
onClick={() => setActiveTab("tr")}
|
||||
className={`flex-1 py-3 px-6 rounded-2xl text-sm font-bold tracking-widest uppercase transition-all ${
|
||||
activeTab === "tr"
|
||||
? "bg-white text-primary shadow-sm border border-gray-200"
|
||||
: "text-gray-400 hover:text-dark hover:bg-white/50"
|
||||
}`}
|
||||
>
|
||||
🇹🇷 Türkçe
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("en")}
|
||||
className={`flex-1 py-3 px-6 rounded-2xl text-sm font-bold tracking-widest uppercase transition-all ${
|
||||
activeTab === "en"
|
||||
? "bg-white text-primary shadow-sm border border-gray-200"
|
||||
: "text-gray-400 hover:text-dark hover:bg-white/50"
|
||||
}`}
|
||||
>
|
||||
🇬🇧 English
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-8 md:p-12">
|
||||
<form action={handleSubmit} className="space-y-8">
|
||||
|
||||
{message && (
|
||||
<div className={`p-4 rounded-xl text-sm font-medium ${message.type === 'success' ? 'bg-green-50 text-green-600 border border-green-200' : 'bg-red-50 text-red-600 border border-red-200'}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-lg font-serif font-bold text-dark border-b border-gray-100 pb-3">Ana Başlıklar</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Üst Başlık (Rozet)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="badge"
|
||||
defaultValue={activeData?.badge || "Hikayemiz"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Başlık 1. Satır</label>
|
||||
<input
|
||||
type="text"
|
||||
name="titleLine1"
|
||||
defaultValue={activeData?.titleLine1 || "Doğanın"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Başlık 2. Satır</label>
|
||||
<input
|
||||
type="text"
|
||||
name="titleLine2"
|
||||
defaultValue={activeData?.titleLine2 || "Kalbinde"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Vurgulu Başlık</label>
|
||||
<input
|
||||
type="text"
|
||||
name="titleHighlight"
|
||||
defaultValue={activeData?.titleHighlight || "Özel Bir Kaçış"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-lg font-serif font-bold text-dark border-b border-gray-100 pb-3">İçerik ve Görsel</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Açıklama Paragraf 1</label>
|
||||
<textarea
|
||||
name="description1"
|
||||
defaultValue={activeData?.description1 || "Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin hemen kıyısında, rüzgarın hiç eksik olmadığı eşsiz bir konumda yer alıyoruz."}
|
||||
rows={3}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Açıklama Paragraf 2</label>
|
||||
<textarea
|
||||
name="description2"
|
||||
defaultValue={activeData?.description2 || "Kite Beach Akyaka; kitesurf tutkusunu doğayla, konforla ve yerel lezzetlerle bütünleştiren benzersiz bir yaşam alanı sunar."}
|
||||
rows={3}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Görsel URL</label>
|
||||
<input
|
||||
type="url"
|
||||
name="image"
|
||||
defaultValue={activeData?.image || "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 md:col-span-2">
|
||||
<h3 className="text-lg font-serif font-bold text-dark border-b border-gray-100 pb-3">İstatistikler ve Rozetler</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 1 (Sayı)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="statsGuestCount"
|
||||
defaultValue={activeData?.statsGuestCount || "500+"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 1 (Metin)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="statsGuestLabel"
|
||||
defaultValue={activeData?.statsGuestLabel || "Mutlu Misafir"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 2 (Sayı)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="statsYearCount"
|
||||
defaultValue={activeData?.statsYearCount || "10+"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">İstatistik 2 (Metin)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="statsYearLabel"
|
||||
defaultValue={activeData?.statsYearLabel || "Yıl Deneyim"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Rozet Başlık (Sol Üst)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="badgeIkoTitle"
|
||||
defaultValue={activeData?.badgeIkoTitle || "IKO"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Rozet Alt Metin</label>
|
||||
<input
|
||||
type="text"
|
||||
name="badgeIkoLabel"
|
||||
defaultValue={activeData?.badgeIkoLabel || "Sertifikalı"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-8 mt-8 border-t border-gray-100">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-2 bg-accent text-white font-bold tracking-widest uppercase py-4 px-10 rounded-xl hover:bg-accent/90 transition-all shadow-lg shadow-accent/20 text-sm disabled:opacity-50"
|
||||
>
|
||||
<Save className="w-5 h-5" />
|
||||
{isPending ? "Kaydediliyor..." : "Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user