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,157 @@
+"use client";
+
+import { useState } from "react";
+import { Save } from "lucide-react";
+import { updateBeachSettings } from "@/app/actions/beach";
+import ImageUpload from "@/components/admin/ImageUpload";
+
+type BeachSettings = {
+  title: string;
+  description: string;
+  reservationInfo: string;
+  image1: string;
+  image2: string;
+  image3: string;
+  image4: string;
+};
+
+export default function BeachClient({ settings }: { settings: BeachSettings }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  
+  const [image1, setImage1] = useState(settings.image1);
+  const [image2, setImage2] = useState(settings.image2);
+  const [image3, setImage3] = useState(settings.image3);
+  const [image4, setImage4] = useState(settings.image4);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccessMessage(null);
+
+    const formData = new FormData(e.currentTarget);
+    const result = await updateBeachSettings(formData);
+
+    if (result.success) {
+      setSuccessMessage("Plaj 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">Plaj Yönetimi</h1>
+        <p className="text-gray-500 mt-2">
+          Site üzerindeki Plaj (Beach) bölümünün yazılarını ve görsellerini buradan değiştirebilirsiniz.
+        </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>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Başlık</label>
+            <input 
+              name="title" 
+              defaultValue={settings.title}
+              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">Açıklama (Ana Metin)</label>
+            <textarea 
+              name="description" 
+              defaultValue={settings.description}
+              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 resize-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Rezervasyon Bilgisi (Buton Üstü Not)</label>
+            <textarea 
+              name="reservationInfo" 
+              defaultValue={settings.reservationInfo}
+              required 
+              rows={2}
+              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="border-t border-gray-100 pt-6">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">Plaj Görselleri (4 Adet)</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 1 (Sol Üst, Dikey)</label>
+                <ImageUpload
+                  name="image1"
+                  value={image1}
+                  onChange={setImage1}
+                  label="Görsel 1 Yükle"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 2 (Sol Alt, Kare)</label>
+                <ImageUpload
+                  name="image2"
+                  value={image2}
+                  onChange={setImage2}
+                  label="Görsel 2 Yükle"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 3 (Sağ Üst, Kare)</label>
+                <ImageUpload
+                  name="image3"
+                  value={image3}
+                  onChange={setImage3}
+                  label="Görsel 3 Yükle"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Görsel 4 (Sağ Alt, Dikey)</label>
+                <ImageUpload
+                  name="image4"
+                  value={image4}
+                  onChange={setImage4}
+                  label="Görsel 4 Yükle"
+                />
+              </div>
+            </div>
+          </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>
+  );
+}