b

2026-06-09 15:15:40 +03:00
parent f6b4acb760
commit d908d83ca5
58 changed files with 4320 additions and 419 deletions
@@ -0,0 +1,111 @@
+"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>
+    </>
+  );
+}