make upload modal

src/components/features/FileUploader/DragAndDropZone.tsx

@@ -0,0 +1,52 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileArrowUp, faFileAudio } from "@fortawesome/pro-thin-svg-icons";
+import { getFileName } from "~/utilities";
+
+interface Props {
+  file: File | null;
+  fileTypes: string[];
+}
+
+export const DragAndDropZone = ({ file, fileTypes }: Props) => {
+  const fileSize =
+    file && file.size >= 1024 * 1024
+      ? (file.size / 1024 / 1024).toFixed(2) + " MB"
+      : file
+        ? `${Math.floor(file.size / 1024)} KB`
+        : null;
+
+  const fileName = file && getFileName(file).toUpperCase();
+
+  if (!file) {
+    return (
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border-2 border-dashed border-ui-border bg-ui-panel p-3">
+        <FontAwesomeIcon icon={faFileArrowUp} className="text-4xl" />
+        <div className="flex flex-col gap-0">
+          <p className="font-medium">
+            <u>Upload a file</u> or drop it here
+          </p>
+          <p className="flex items-center gap-2 text-sm font-normal opacity-50">
+            {fileTypes.join(", ").toString().toUpperCase()} supported
+          </p>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border-2 border-dashed border-ui-border bg-ui-panel p-3">
+        <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
+        <div className="flex grow flex-col gap-0">
+          <p className="font-medium">
+            {file.name.slice(0, file.name.lastIndexOf("."))}
+          </p>
+          <p className="flex items-center gap-2 text-sm font-normal">
+            <span className="opacity-50">
+              {`${fileName} file size: ${fileSize} `}
+            </span>
+            <u className="transition-all hover:text-white/80">Change File</u>
+          </p>
+        </div>
+      </div>
+    );
+  }
+};

src/components/features/FileUploader/index.tsx

@@ -0,0 +1,27 @@
+import { FileUploader as DragDropFilesUploader } from "react-drag-drop-files";
+import { DragAndDropZone } from "./DragAndDropZone";
+
+interface Props {
+  title: string;
+  fileTypes: string[];
+  file: File | null;
+  setFile: (file: File | null) => void;
+}
+
+export const FileUploader = ({ fileTypes, title, file, setFile }: Props) => {
+  return (
+    <div className="flex w-full flex-col gap-3">
+      {title}
+      <DragDropFilesUploader
+        handleChange={(file: File | null) => {
+          setFile(file);
+        }}
+        name="file"
+        types={fileTypes}
+        maxSize={50}
+      >
+        <DragAndDropZone file={file} fileTypes={fileTypes} />
+      </DragDropFilesUploader>
+    </div>
+  );
+};

src/components/features/ToolbarMain/index.tsx

@@ -20,6 +20,7 @@ import {
 import { ToolbarButtons } from "./ToolbarButtons";
 import { twMerge } from "tailwind-merge";
 
+import { UploadImage } from "../UploadImage";
 // import { layout } from "~/signals";
 
 export const ToolbarMain = () => {
@@ -28,6 +29,8 @@ export const ToolbarMain = () => {
   //   signals: { isMobile, windowWidth, windowHeight },
   // } = layout;
   const [isUploadSubmenuOpen, setIsUploadSubmenuOpen] = useState(false);
+  const [isUploadImageOpen, setIsUploadImageOpen] = useState(false);
+
   const panelClasses =
     "rounded-2xl border border-ui-border bg-ui-panel p-2 shadow-xl";
   return (
@@ -63,7 +66,10 @@ export const ToolbarMain = () => {
                   panelClasses,
                 )}
               >
-                <ToolbarButtons icon={faImage} />
+                <ToolbarButtons
+                  icon={faImage}
+                  onClick={() => setIsUploadImageOpen(true)}
+                />
                 <ToolbarButtons icon={faFilm} />
               </div>
             )}
@@ -83,6 +89,11 @@ export const ToolbarMain = () => {
           <ToolbarButtons icon={faDownload} />
         </div>
       </div>
+
+      <UploadImage
+        isOpen={isUploadImageOpen}
+        closeCallback={() => setIsUploadImageOpen(false)}
+      />
     </div>
   );
 };

src/components/features/UploadImage/index.tsx

@@ -0,0 +1,31 @@
+// import { FileUploader } from "../FileUploader";
+import {
+  Description,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
+
+export const UploadImage = ({
+  isOpen,
+  closeCallback,
+}: {
+  isOpen: boolean;
+  closeCallback: () => void;
+}) => {
+  return (
+    <Dialog open={isOpen} onClose={closeCallback} className="relative z-50">
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <DialogPanel className="max-w-lg space-y-4 border bg-white p-12">
+          <DialogTitle className="font-bold">Upload Image</DialogTitle>
+          <Description>This is dialogue desctiption </Description>
+          <p>this is just a p tag</p>
+          <div className="flex gap-4">
+            <button onClick={closeCallback}>Cancel</button>
+            <button onClick={closeCallback}>Enter</button>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  );
+};

src/components/ui/Input.tsx

@@ -2,12 +2,7 @@ import React from "react";
 import { twMerge } from "tailwind-merge";
 import { IconDefinition } from "@fortawesome/pro-thin-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const kebabCase = (str: string) =>
-  str
-    .replace(/([a-z])([A-Z])/g, "$1-$2")
-    .replace(/[\s_]+/g, "-")
-    .toLowerCase();
+import { kebabCase } from "~/utilities";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   inputClassName?: string;

src/utilities/index.ts

@@ -0,0 +1,12 @@
+export const kebabCase = (str: string) =>
+  str
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/[\s_]+/g, "-")
+    .toLowerCase();
+
+export const getFileName = (file: File) => {
+  return file.name.substring(0, file.name.lastIndexOf("."));
+};
+export const getFileExtension = (file: File) => {
+  return file.name.substring(file.name.lastIndexOf("."));
+};