feat: add step 4 images upload with cloudinary

app/components/Inputs/ImageUpload.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { CldUploadWidget } from "next-cloudinary";
+import { useCallback } from "react";
+import { TbPhotoPlus } from "react-icons/tb";
+import Image from "next/image";
+
+declare global {
+  var cloudinary: any;
+}
+
+interface ImageUploadProps {
+  onChange: (value: string) => void;
+  value: string;
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({ onChange, value }) => {
+  const handleUpload = useCallback(
+    (result: any) => {
+      onChange(result.info.secure_url);
+    },
+    [onChange]
+  );
+
+  return (
+    <CldUploadWidget
+      onUpload={handleUpload}
+      uploadPreset="Airbnb-clone"
+      options={{
+        maxFiles: 1,
+        styles: {
+          palette: {
+            window: "#F5F5F5",
+            sourceBg: "#FFFFFF",
+            windowBorder: "#90a0b3",
+            tabIcon: "#69778A",
+            inactiveTabIcon: "#69778A",
+            menuIcons: "#69778A",
+            link: "#F43F5E",
+            action: "#8F5DA5",
+            inProgress: "#0194c7",
+            complete: "#53ad9d",
+            error: "#c43737",
+            textDark: "#90A0B3",
+            textLight: "#FFFFFF",
+          },
+          frame: {
+            background: "#67676700",
+          },
+        },
+      }}
+    >
+      {({ open }) => {
+        return (
+          <div
+            onClick={() => open?.()}
+            className="
+              relative
+              cursor-pointer
+              hover:opacity-70
+              transition
+              border-dashed
+              border-2
+              p-20
+              border-neutral-300
+              flex
+              flex-col
+              justify-center
+              items-center
+              gap-4
+              text-neutral-600
+            "
+          >
+            <TbPhotoPlus size={50} />
+            <div className="font-semibold text-lg">Click to upload a photo</div>
+            {value && (
+              <div className="absolute inset-0 w-full h-full">
+                <Image
+                  alt="Uploaded image"
+                  fill
+                  style={{ objectFit: "cover" }}
+                  src={value}
+                />
+              </div>
+            )}
+          </div>
+        );
+      }}
+    </CldUploadWidget>
+  );
+};
+
+export default ImageUpload;

app/components/modals/RentModal.tsx

@@ -10,6 +10,7 @@ import { FieldValues, useForm } from "react-hook-form";
 import CountrySelect from "../Inputs/CountrySelect";
 import dynamic from "next/dynamic";
 import Counter from "../Inputs/Counter";
+import ImageUpload from "../Inputs/ImageUpload";
 
 enum STEPS {
   CATEGORY = 0,
@@ -50,6 +51,7 @@ const RentModal = () => {
   const guestCount = watch("guestCount");
   const roomCount = watch("roomCount");
   const bathroomCount = watch("bathroomCount");
+  const imageSrc = watch("imageSrc");
 
   const Map = useMemo(
     () => dynamic(() => import("../Map"), { ssr: false }),
@@ -166,6 +168,21 @@ const RentModal = () => {
     );
   }
 
+  if (step === STEPS.IMAGES) {
+    bodyContent = (
+      <div className="flex flex-col gap-8">
+        <Heading
+          title="Upload some photos of your place"
+          subtitle="You can always add more later"
+        />
+        <ImageUpload
+          value={imageSrc}
+          onChange={(value) => setCustomValue("imageSrc", value)}
+        />
+      </div>
+    );
+  }
+
   return (
     <Modal
       isOpen={rentModal.isOpen}

next.config.js

@@ -4,7 +4,11 @@ const nextConfig = {
     appDir: true,
   },
   images: {
-    domains: ["avatars.githubusercontent.com", "lh3.googleusercontent.com"],
+    domains: [
+      "avatars.githubusercontent.com",
+      "lh3.googleusercontent.com",
+      "res.cloudinary.com",
+    ],
   },
 };
 

package.json

@@ -21,6 +21,7 @@
     "eslint-config-next": "13.3.4",
     "next": "13.3.4",
     "next-auth": "^4.22.1",
+    "next-cloudinary": "^4.10.0",
     "postcss": "8.4.23",
     "query-string": "^8.1.0",
     "react": "18.2.0",