From 40ae54a4e665c16ea0355d211534df7132c16ba1 Mon Sep 17 00:00:00 2001
From: Zeddnyx <zeddnyx08@gmail.com>
Date: Sat, 22 Jun 2024 21:57:17 +0700
Subject: [PATCH] ui(file upload)

---
 components/form/input-file/file-multiple.tsx  | 10 +++-
 components/form/input-file/file.tsx           | 14 +++--
 components/form/input-file/image-multiple.tsx | 21 +++++--
 components/form/input-file/image.tsx          | 12 +++-
 components/form/input-file/preview-file.tsx   | 26 ++++++--
 components/form/input-file/preview-img.tsx    | 20 +++++--
 components/ui/form/File.tsx                   | 59 +++++++++++++------
 constants/index.ts                            |  4 ++
 types/index.ts                                |  4 +-
 9 files changed, 126 insertions(+), 44 deletions(-)

diff --git a/components/form/input-file/file-multiple.tsx b/components/form/input-file/file-multiple.tsx
index 8de2582..8334621 100644
--- a/components/form/input-file/file-multiple.tsx
+++ b/components/form/input-file/file-multiple.tsx
@@ -1,9 +1,11 @@
 "use client";
-import FileInput from "@/components/ui/form/File";
 import { useState } from "react";
 
+import FileInput from "@/components/ui/form/File";
+
 export default function File() {
   const [file, setFile] = useState<File[]>([]);
+
   return (
     <FileInput
       file={file}
@@ -12,8 +14,10 @@ export default function File() {
       preview="file"
       isMultiple
     >
-      <p className="hover:underline">Click here</p>
-      <p>or drag and drop</p>
+      <div className="flex flex-col items-center justify-center p-2">
+        <p>Click here</p>
+        <p>or drag and drop here</p>
+      </div>
     </FileInput>
   );
 }
diff --git a/components/form/input-file/file.tsx b/components/form/input-file/file.tsx
index b4e1190..292cf87 100644
--- a/components/form/input-file/file.tsx
+++ b/components/form/input-file/file.tsx
@@ -1,14 +1,20 @@
 "use client";
-import Button from "@/components/ui/component/Button";
-import FileInput from "@/components/ui/form/File";
 import { useState } from "react";
 
+import FileInput from "@/components/ui/form/File";
+import { cn } from "@/lib/utils";
+
 export default function File() {
   const [file, setFile] = useState<File[]>([]);
+
   return (
     <FileInput file={file} setFile={setFile} name="file" preview="file">
-      <Button text="Click here" />
-      <p>or drag and drop</p>
+      <div
+        className={cn(`h-20 flex items-center flex-col justify-center p-2`, {})}
+      >
+        <p>Click here</p>
+        <p>or drag and drop here</p>
+      </div>
     </FileInput>
   );
 }
diff --git a/components/form/input-file/image-multiple.tsx b/components/form/input-file/image-multiple.tsx
index 0470ea0..96fdc27 100644
--- a/components/form/input-file/image-multiple.tsx
+++ b/components/form/input-file/image-multiple.tsx
@@ -1,14 +1,25 @@
 "use client";
-import Button from "@/components/ui/component/Button";
-import FileInput from "@/components/ui/form/File";
 import { useState } from "react";
 
+import FileInput from "@/components/ui/form/File";
+import { cn } from "@/lib/utils";
+
 export default function Image() {
   const [file, setFile] = useState<File[]>([]);
   return (
-    <FileInput file={file} setFile={setFile} name="file" preview="img" isMultiple>
-      <Button text="Click here" />
-      <p>or drag and drop</p>
+    <FileInput
+      file={file}
+      setFile={setFile}
+      name="file"
+      preview="img"
+      isMultiple
+    >
+      <div
+        className={cn(`h-20 flex items-center flex-col justify-center p-2`, {})}
+      >
+        <p>Click here</p>
+        <p>or drag and drop here</p>
+      </div>
     </FileInput>
   );
 }
diff --git a/components/form/input-file/image.tsx b/components/form/input-file/image.tsx
index a958bbc..ede3c23 100644
--- a/components/form/input-file/image.tsx
+++ b/components/form/input-file/image.tsx
@@ -1,13 +1,19 @@
 "use client";
-import Button from "@/components/ui/component/Button";
-import FileInput from "@/components/ui/form/File";
 import { useState } from "react";
 
+import FileInput from "@/components/ui/form/File";
+import { cn } from "@/lib/utils";
+
 export default function Image() {
   const [file, setFile] = useState<File[]>([]);
   return (
     <FileInput file={file} setFile={setFile} name="file" preview="img" accept="file">
-      <p>or drag and drop</p>
+      <div
+        className={cn(`h-20 flex items-center flex-col justify-center p-2`, {})}
+      >
+        <p>Click here</p>
+        <p>or drag and drop here</p>
+      </div>
     </FileInput>
   );
 }
diff --git a/components/form/input-file/preview-file.tsx b/components/form/input-file/preview-file.tsx
index 273d755..75f4e55 100644
--- a/components/form/input-file/preview-file.tsx
+++ b/components/form/input-file/preview-file.tsx
@@ -1,14 +1,28 @@
 import { convertSizeBytes } from "@/lib/utils";
 import { FaFile } from "react-icons/fa";
+import { MdClose } from "react-icons/md";
 
-export default function PreviewFile({ file }: { file: File }) {
+export default function PreviewFile({
+  file,
+  handleDelete,
+}: {
+  file: File;
+  handleDelete: () => void;
+}) {
   return (
-    <div className="flex justify-start w-full items-center gap-4 p-1 px-2 rounded-lg bg-dark-400">
-      <FaFile size={35} />
-      <div>
-        <p>{file?.name}</p>
-        <p className="text-xs">{convertSizeBytes(file?.size)}</p>
+    <div className="flex justify-between h-16 w-full items-center rounded-lg !p-0 bg-dark-400">
+      <div className="p-1 px-2 flex justify-start items-center gap-4">
+        <FaFile size={35} />
+        <div>
+          <p>{file?.name}</p>
+          <p className="text-xs">{convertSizeBytes(file?.size)}</p>
+        </div>
       </div>
+      <MdClose
+        size={20}
+        className="cursor-pointer h-full w-14 px-5 transition-colors hover:bg-red-500 rounded-tr-lg"
+        onClick={handleDelete}
+      />
     </div>
   );
 }
diff --git a/components/form/input-file/preview-img.tsx b/components/form/input-file/preview-img.tsx
index 28eb008..f4d10d7 100644
--- a/components/form/input-file/preview-img.tsx
+++ b/components/form/input-file/preview-img.tsx
@@ -1,17 +1,29 @@
 import Image from "next/image";
+import { MdClose } from "react-icons/md";
 
-export default function PreviewImg({ file }: { file: File|null }) {
-  if(!file) return null
+export default function PreviewImg({
+  file,
+  handleDelete,
+}: {
+  file: File | null;
+  handleDelete: () => void;
+}) {
+  if (!file) return null;
 
   return (
-    <div>
+    <div className="relative size-40 bg-dark-400 rounded-lg">
       <Image
         src={URL?.createObjectURL(file)}
         alt={file?.name}
-        className="size-40 rounded-lg object-cover"
+        className="size-40 object-cover"
         width={40}
         height={40}
       />
+      <MdClose
+        className="size-6 absolute top-0 right-0 cursor-pointer transition-colors bg-red-500 rounded-bl-lg rounded-tr-lg"
+        size={15}
+        onClick={handleDelete}
+      />
     </div>
   );
 }
diff --git a/components/ui/form/File.tsx b/components/ui/form/File.tsx
index 07cfda7..803460a 100644
--- a/components/ui/form/File.tsx
+++ b/components/ui/form/File.tsx
@@ -1,7 +1,8 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 import PreviewFile from "@/components/form/input-file/preview-file";
 import PreviewImg from "@/components/form/input-file/preview-img";
+import { cn } from "@/lib/utils";
 
 export default function File({
   file,
@@ -15,9 +16,11 @@ export default function File({
   preview = "img",
   isMultiple = false,
   accept = "image/*,.pdf",
-  maxSize = 10 * 1024 * 1024, // 10MB
+  maxSize = 10 * 1024 * 1024, //10MB
+  ...props
 }: IUploadFile) {
   const refFile = useRef<HTMLInputElement>(null);
+  const [isActive, setIsActive] = useState(false);
 
   const handleFileUpload = async (files: File) => {
     const acceptedTypes = ["image/jpeg", "image/png", "application/pdf"];
@@ -44,6 +47,7 @@ export default function File({
 
   const handleDrop = async (e: React.DragEvent) => {
     e.preventDefault();
+    setIsActive(false);
     const file = e.dataTransfer?.files?.[0];
     file && (await handleFileUpload(file));
   };
@@ -53,17 +57,27 @@ export default function File({
     file && (await handleFileUpload(file));
   };
 
-  // const handleDelete = async () => {
-    // const files = file?.split("/").pop();
-    // pass a func delete here
-  // };
+  const handleOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsActive(true);
+  };
+
+  const handleDelete = (id: number) => {
+    setFile((file) => file.filter((_, index) => index !== id));
+  };
 
   return (
     <div
       onDrop={handleDrop}
-      onDragOver={(e) => e.preventDefault()}
-      onClick={() => refFile.current?.click()}
-      className="w-full"
+      onDragOver={handleOver}
+      onDragLeave={() => setIsActive(false)}
+      className={cn(
+        `h-fit w-full flex items-center flex-col justify-center p-2`,
+        {
+          "border-2 border-dashed": isActive,
+        },
+      )}
+      {...props}
     >
       <input
         type="file"
@@ -76,31 +90,42 @@ export default function File({
 
       {isMultiple && preview === "img" && file?.length > 0 && (
         <div className="flex flex-col gap-5 w-full">
-          {children}
-          <div className="flex gap-2">
+          <div onClick={() => refFile.current?.click()}>{children}</div>
+          <div className="flex gap-2 flex-wrap justify-between gap-y-4">
             {file?.map((item, id) => {
-              return <PreviewImg key={id} file={item} />;
+              return <PreviewImg key={id} file={item} handleDelete={() => handleDelete(id)} />;
             })}
           </div>
         </div>
       )}
       {isMultiple && preview === "file" && file?.length > 0 && (
         <div className="flex flex-col gap-5 w-full">
-          {children}
+          <div onClick={() => refFile.current?.click()}>{children}</div>
           <div className="flex gap-2 flex-col items-center w-full">
             {file?.map((item, id) => {
-              return <PreviewFile key={id} file={item} />;
+              return (
+                <PreviewFile
+                  key={id}
+                  file={item}
+                  handleDelete={() => handleDelete(id)}
+                />
+              );
             })}
           </div>
         </div>
       )}
       {!isMultiple && preview === "img" && file?.length > 0 && (
-        <PreviewImg file={file && file[0]} />
+        <PreviewImg file={file && file[0]} handleDelete={() => handleDelete(0)} />
       )}
       {!isMultiple && preview === "file" && file?.length > 0 && (
-        <PreviewFile file={file && file[0]} />
+        <PreviewFile
+          file={file && file[0]}
+          handleDelete={() => handleDelete(0)}
+        />
+      )}
+      {file?.length === 0 && (
+        <div onClick={() => refFile.current?.click()}>{children}</div>
       )}
-      {file?.length === 0 && children}
     </div>
   );
 }
diff --git a/constants/index.ts b/constants/index.ts
index 062ba57..1430ef0 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -100,6 +100,10 @@ export const SIDEBAR_ITEMS: ISidebar[] = [
         title: "Scroll Based",
         href: ROUTES.animationUrl("scroll-based"),
       },
+      {
+        title: "Scroll Opacity",
+        href: ROUTES.animationUrl("scroll-opacity"),
+      },
       {
         title: "Directionally Aware",
         href: ROUTES.animationUrl("directionally-aware"),
diff --git a/types/index.ts b/types/index.ts
index 6308644..79f9674 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -69,7 +69,7 @@ declare interface IOtp {
   disabled?: boolean;
 }
 
-interface IUploadFile {
+interface IUploadFile extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   accept?: string;
   isLoading?: boolean;
   setIsLoading?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -104,7 +104,7 @@ declare interface IAcordion {
 }
 declare interface IAcordionImage {
   image: string | any;
-  logo?: React.ReactNode  ;
+  logo?: React.ReactNode;
   title: string;
   description: string;
   className?: string;