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,73 @@
+"use client";
+
+import { CldUploadWidget } from "next-cloudinary";
+import { ImagePlus, X } from "lucide-react";
+import Image from "next/image";
+
+interface ImageUploadProps {
+  value: string;
+  onChange: (value: string) => void;
+  folder?: string;
+  label?: string;
+  name?: string; // Add name prop for hidden input
+}
+
+export default function ImageUpload({ value, onChange, folder = "kozmosbeach", label = "Görsel Yükle", name }: ImageUploadProps) {
+  const onUpload = (result: any) => {
+    onChange(result.info.secure_url);
+  };
+
+  return (
+    <div className="w-full">
+      {name && <input type="hidden" name={name} value={value} />}
+      {value ? (
+        <div className="relative w-full aspect-video rounded-xl overflow-hidden border border-gray-200">
+          <Image
+            fill
+            sizes="(max-width: 768px) 100vw, 33vw"
+            className="object-cover"
+            alt="Upload"
+            src={value}
+          />
+          <div className="absolute top-2 right-2 flex gap-2">
+            <button
+              type="button"
+              onClick={() => onChange("")}
+              className="p-1.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition shadow-sm"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <CldUploadWidget
+          signatureEndpoint="/api/cloudinary"
+          options={{
+            folder: folder,
+            maxFiles: 1,
+            sources: ["local", "url", "camera"],
+          }}
+          onSuccess={onUpload}
+        >
+          {({ open }) => {
+            const onClick = (e: React.MouseEvent) => {
+              e.preventDefault();
+              open();
+            };
+
+            return (
+              <button
+                type="button"
+                onClick={onClick}
+                className="w-full h-32 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center gap-2 text-gray-500 hover:border-turquoise hover:text-turquoise transition-colors bg-gray-50 hover:bg-turquoise/5"
+              >
+                <ImagePlus size={24} />
+                <span className="text-sm font-medium">{label}</span>
+              </button>
+            );
+          }}
+        </CldUploadWidget>
+      )}
+    </div>
+  );
+}