74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|