feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings

2026-06-09 21:28:45 +03:00
parent 2b3392dcb1
commit a4ad9344a0
52 changed files with 4300 additions and 263 deletions
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { Save } from "lucide-react";
+import { updateContactSettings } from "@/app/actions/contact";
+
+type ContactSettings = {
+  address: string;
+  phone: string;
+  instagram: string;
+  mapUrl: string;
+};
+
+export default function ContactClient({ settings }: { settings: ContactSettings }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccessMessage(null);
+
+    const formData = new FormData(e.currentTarget);
+    const result = await updateContactSettings(formData);
+
+    if (result.success) {
+      setSuccessMessage("İletişim ayarları başarıyla kaydedildi.");
+    } else {
+      setError(result.error || "Bir hata oluştu");
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <div className="mb-8">
+        <h1 className="text-3xl font-serif text-gray-900">İletişim & Konum</h1>
+        <p className="text-gray-500 mt-2">
+          Site üzerindeki iletişim bilgilerini ve Google Haritalar iframe adresini buradan güncelleyebilirsiniz.
+        </p>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          
+          {error && (
+            <div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {successMessage && (
+            <div className="bg-green-50 text-green-600 p-4 rounded-lg text-sm font-medium">
+              {successMessage}
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Adres</label>
+              <textarea 
+                name="address" 
+                defaultValue={settings.address}
+                placeholder="Örn: Akyaka Mah. Gökova..."
+                required 
+                rows={3}
+                className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
+              />
+            </div>
+
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Telefon / WhatsApp (Ülke Koduyla)</label>
+                <input 
+                  type="text" 
+                  name="phone" 
+                  defaultValue={settings.phone}
+                  placeholder="Örn: 905001234567"
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Instagram Linki</label>
+                <input 
+                  type="url" 
+                  name="instagram" 
+                  defaultValue={settings.instagram}
+                  placeholder="https://instagram.com/..."
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Google Maps Embed URL (src)</label>
+            <textarea 
+              name="mapUrl" 
+              defaultValue={settings.mapUrl}
+              placeholder="https://www.google.com/maps/embed?pb=..."
+              required 
+              rows={4}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none font-mono text-sm"
+            />
+            <p className="text-xs text-gray-500 mt-2">
+              Google Haritalar'dan "Harita Yerleştir" seçeneğini seçip içindeki <strong>src="..."</strong> kısmındaki URL'yi buraya yapıştırın.
+            </p>
+          </div>
+
+          <div className="pt-4 flex justify-end border-t border-gray-100">
+            <button 
+              type="submit" 
+              disabled={loading}
+              className="bg-turquoise text-white px-8 py-2.5 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50 flex items-center gap-2"
+            >
+              <Save size={18} />
+              {loading ? "Kaydediliyor..." : "Ayarları Kaydet"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}