Publish shot modal UI

components/Profile/FileUploader.tsx

@@ -59,27 +59,32 @@ const FileUploader = ({ onFilesChange, setFiles }: FileUploaderProps) => {
     <div {...getRootProps()} className="relative w-full h-full">
       <label
         htmlFor="dropzone-file"
-        className="relative p-3 flex flex-col justify-center w-full h-screen max-w-5xl mx-auto border-2 border-dashed rounded-lg border-gray-300 cursor-pointer"
+        className="relative p-3 max-w-5xl mx-auto flex flex-col justify-center w-full h-screen border-2 border-gray-300 border-dashed rounded-lg cursor-pointer"
       >
         <div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
           <div className="flex flex-col items-center justify-center space-y-3">
-            <Image
-              src={imageIcon}
-              alt=""
-              width={80}
-              height={100}
-              className=""
-            />
+            <Image src={imageIcon} alt="" width={80} height={100} />
             <p className="mb-2 text-gray-500">
-              Drag and drop files, or
-              <span className="border-b-2 pb-0.5 mx-1 border-pink-500">
+              Drag and drop image, or
+              <span className="border-b-2 pb-0,5 mx-1 border-pink-500">
                 Browse
               </span>
             </p>
-            <p className="text-gray-500">
-              Images (png, jpg, gif) or Videos (mp4)
+            <p className=" text-gray-500">
+              Minimum 1600px width recommended. Max 10MB each (20MB for videos)
             </p>
           </div>
+
+          <ul className="w-full mt-8 space-y-1 flex items-center justify-evenly text-gray-500 list-disc list-inside ">
+            <div>
+              <li>High resolution images (png, jpg, gif)</li>
+              <li>Animated gifs</li>
+            </div>
+            <div>
+              <li>Videos (mp4)</li>
+              <li>Only upload media you own the rights to</li>
+            </div>
+          </ul>
         </div>
 
         <input

components/Reusable/Modal.tsx

@@ -1,23 +1,47 @@
+"use client";
 import React from "react";
-import { FaX } from "react-icons/fa6";
+import { motion } from "framer-motion";
+
+import { useModal } from "@/hooks/modal";
 
 interface ModalProps {
   children: React.ReactNode;
   isOpen: boolean;
 }
 export default function Modal({ children, isOpen }: ModalProps) {
+  const { onClose } = useModal();
+  const ref = React.useRef(null);
+  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === ref.current) {
+      onClose();
+    }
+  };
+
+  const variants = {
+    open: { opacity: 1, x: 0 },
+    closed: { opacity: 0, x: "-100%" },
+  };
+
   return isOpen ? (
-    <div className="bg-black/55 overflow-y-auto overflow-hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full">
+    <div
+      ref={ref}
+      onClick={handleBackdropClick}
+      className="bg-black/70 overflow-y-auto overflow-hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full"
+    >
       <div className=" relative p-4 w-full max-w-md max-h-full">
         <div className="relative bg-white rounded-2xl shadow-2xl">
-          {/* <button
-            type="button"
-            className="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
-            data-modal-hide="popup-modal"
+          <motion.div
+            animate={isOpen ? "open" : "closed"}
+            variants={variants}
+            transition={{
+              duration: 5,
+              delay: 0.3,
+              ease: [0.5, 0.71, 1, 1.5],
+            }}
+            className="p-4 h-96 w-64"
           >
-            <FaX />
-          </button> */}
-          <div className="p-4">{children}</div>
+            {children}
+          </motion.div>
         </div>
       </div>
     </div>

package.json

@@ -18,6 +18,7 @@
     "@uploadthing/react": "^6.1.0",
     "clerk": "^0.8.3",
     "cuid": "^3.0.0",
+    "framer-motion": "^10.18.0",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",