112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
"use client";
|
||
|
||
import { useActionState } from "react";
|
||
import { updateSettings } from "@/app/actions/settings";
|
||
import { Save, CheckCircle2 } from "lucide-react";
|
||
import { SiteSettings } from "@prisma/client";
|
||
|
||
export default function SettingsForm({ defaultValues }: { defaultValues: SiteSettings | null }) {
|
||
const [state, formAction, isPending] = useActionState(updateSettings, null);
|
||
|
||
// Fallback data if db is empty
|
||
const fallback = {
|
||
title: "Kite Beach Akyaka",
|
||
email: "info@kitebeach.com",
|
||
phone: "+90 555 123 4567",
|
||
address: "Akyaka, Muğla, Türkiye",
|
||
instagram: "https://instagram.com/kitebeachakyaka"
|
||
};
|
||
|
||
const values = defaultValues || fallback;
|
||
|
||
return (
|
||
<>
|
||
{state?.success && (
|
||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3 text-green-800 animate-fade-in">
|
||
<CheckCircle2 className="w-5 h-5 text-green-600" />
|
||
<p className="font-medium">{state.message}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden relative">
|
||
<form action={formAction} className="p-8 md:p-10">
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||
<div className="col-span-1 md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Site Başlığı</label>
|
||
<input
|
||
type="text"
|
||
name="title"
|
||
defaultValue={values.title}
|
||
required
|
||
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 hover:border-gray-300"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">İletişim E-posta</label>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
defaultValue={values.email}
|
||
required
|
||
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 hover:border-gray-300"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Telefon Numarası</label>
|
||
<input
|
||
type="tel"
|
||
name="phone"
|
||
defaultValue={values.phone}
|
||
required
|
||
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 hover:border-gray-300"
|
||
/>
|
||
</div>
|
||
|
||
<div className="col-span-1 md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Açık Adres</label>
|
||
<textarea
|
||
name="address"
|
||
defaultValue={values.address}
|
||
required
|
||
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 hover:border-gray-300 resize-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="col-span-1 md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Instagram Bağlantısı</label>
|
||
<input
|
||
type="url"
|
||
name="instagram"
|
||
defaultValue={values.instagram || ""}
|
||
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 hover:border-gray-300"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end border-t border-gray-100 pt-6">
|
||
<button
|
||
type="submit"
|
||
disabled={isPending}
|
||
className="flex items-center justify-center gap-3 bg-accent text-white font-bold tracking-widest uppercase py-4 px-10 rounded-xl hover:bg-accent/90 transition-all disabled:opacity-70 disabled:cursor-not-allowed shadow-lg shadow-accent/20"
|
||
>
|
||
{isPending ? (
|
||
<>Kaydediliyor...</>
|
||
) : (
|
||
<>
|
||
<Save className="w-5 h-5" />
|
||
Ayarları Kaydet
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|