From 6bba2e449fbb2056cf47f6666373794d7eb57d76 Mon Sep 17 00:00:00 2001
From: Wadad Parker <wadadparker5@gmail.com>
Date: Fri, 12 Jan 2024 00:50:18 +0530
Subject: [PATCH 1/6] style: modal structure

---
 .../ConversationCard/ConversationCard.jsx     |  8 ++++
 src/components/modals/FileSharingModal.jsx    | 41 +++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/modals/FileSharingModal.jsx

diff --git a/src/components/ConversationCard/ConversationCard.jsx b/src/components/ConversationCard/ConversationCard.jsx
index afd0ffd..89213ad 100644
--- a/src/components/ConversationCard/ConversationCard.jsx
+++ b/src/components/ConversationCard/ConversationCard.jsx
@@ -4,9 +4,11 @@ import { useState, useEffect } from "react";
 import styles from "./styles.module.css";
 import MessageBox from "../messageBox/MessageBox";
 import Skeleton from "@mui/material/Skeleton";
+import FileSharingModal from "../modals/FileSharingModal";
 
 const ConversationCards = ({ loading }) => {
   const [text, settext] = useState("");
+  const [showModal,setShowModal] = useState(false);
 
   const changeSelectedText = (markup) => {
     const textarea = document.getElementById("textAreaConversationCard");
@@ -92,6 +94,8 @@ const ConversationCards = ({ loading }) => {
   });
 
   return (
+    <>
+    { showModal && <FileSharingModal setShowModal={setShowModal} />}
     <div
       className="h-[calc(100vh_-_48px)] grow rounded-[10px] border-[6px] border-white bg-white m-auto flex flex-col w-full 
       justify-between overflow-hidden"
@@ -576,12 +580,14 @@ const ConversationCards = ({ loading }) => {
           ></textarea>
           <div className="flex justify-between p-[8px]">
             <div className="flex flex-wrap gap-[8px]  flex-row items-center">
+              {/* Open modal here */}
               <svg
                 width="30"
                 height="31"
                 viewBox="0 0 30 31"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
+                
               >
                 <rect
                   y="0.772461"
@@ -589,6 +595,7 @@ const ConversationCards = ({ loading }) => {
                   height="30"
                   rx="15"
                   fill="#571F6A"
+                  onClick={()=>setShowModal(true)}
                 />
                 <path
                   d="M14.9998 10.4391V15.7725M14.9998 15.7725V21.1058M14.9998 15.7725H9.6665M14.9998 15.7725H20.3332"
@@ -752,6 +759,7 @@ const ConversationCards = ({ loading }) => {
         </div>
       </div>
     </div>
+    </>
   );
 };
 export default ConversationCards;
diff --git a/src/components/modals/FileSharingModal.jsx b/src/components/modals/FileSharingModal.jsx
new file mode 100644
index 0000000..2b077bc
--- /dev/null
+++ b/src/components/modals/FileSharingModal.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+
+
+
+const FileSharingModal = ({setShowModal}) => {
+    const [fileName,setFileName] = useState("");
+  return (
+    <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center'>
+        <main className='relative bg-white w-5/12 p-4 rounded-md flex flex-col items-stretch'>
+            <svg className="w-6 h-6 absolute right-5 top-5 hover:text-red-500 hover:cursor-pointer" onClick={()=>setShowModal(false)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <h1 className='text-2xl font-semibold'>Share a File</h1>
+            <aside className='flex flex-col space-y-1'>
+                <label  className='text-gray-600 font-semibold'>Name of File</label>
+                <input className='border rounded border-text py-1.5 px-2' placeholder='Enter the name of file'/>
+            </aside>
+            <aside className='flex flex-col space-y-1'>
+                <label  className='text-gray-600 font-semibold'>Add Attachment</label>
+                <input type='file' className='border file rounded border-text py-1.5 px-2' onChange={({target: {files}})=>setFileName(files[0].name)} />
+            </aside>
+           
+            <aside className='flex flex-col space-y-1'>
+                <label  className='text-gray-600 font-semibold'>Add Tags</label>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-gray-500 hover:cursor-pointer">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+
+            </aside>
+            <aside className='flex flex-col space-y-1'>
+                <label  className='text-gray-600 font-semibold'>Add Path</label>
+                <input className='border rounded border-text py-1.5 px-2' placeholder='Enter the path of file'/>
+                <small className='text-text font-semibold'>The Above means that in File Section it will be saved in Paper folder in Endsem folder in Exams folder</small>
+            </aside>
+            <button className='text-white bg-primary py-2 px-4 rounded-md self-end' >Share File</button>
+        </main>
+    </div>
+  )
+}
+
+export default FileSharingModal
\ No newline at end of file

From e72315754f1c982b6a87d7544c0bafc485235529 Mon Sep 17 00:00:00 2001
From: Wadad Parker <wadadparker5@gmail.com>
Date: Fri, 12 Jan 2024 00:58:32 +0530
Subject: [PATCH 2/6] feat: add pdf file

---
 src/components/modals/FileSharingModal.jsx | 26 +++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/modals/FileSharingModal.jsx b/src/components/modals/FileSharingModal.jsx
index 2b077bc..aca2688 100644
--- a/src/components/modals/FileSharingModal.jsx
+++ b/src/components/modals/FileSharingModal.jsx
@@ -1,9 +1,26 @@
 import React, { useState } from 'react'
 
+const Attachment = ({file, setFile}) =>
+{
+    return (
+        <section className='flex flex-col space-y-1 border rounded border-text py-1.5 px-2 '>
+            <aside className='flex rounded-sm p-0.5 items-center bg-blue-100 w-fit'>
+                <svg className='' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2V7L12 7.05441C11.9999 7.47848 11.9998 7.8906 12.0455 8.23052C12.097 8.61372 12.2226 9.051 12.5858 9.41421C12.949 9.77743 13.3863 9.90295 13.7695 9.95447C14.1094 10.0002 14.5215 10.0001 14.9456 10H14.9456H14.9456H14.9456L15 10H20V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H12ZM14 2.00462V7C14 7.49967 14.0021 7.77383 14.0277 7.96402L14.0287 7.97131L14.036 7.97231C14.2262 7.99788 14.5003 8 15 8H19.9954C19.9852 7.58836 19.9525 7.31595 19.8478 7.06306C19.6955 6.69552 19.4065 6.40649 18.8284 5.82843L16.1716 3.17157C15.5935 2.59351 15.3045 2.30448 14.9369 2.15224C14.684 2.04749 14.4116 2.01481 14 2.00462ZM8 13C8 12.4477 8.44772 12 9 12L15 12C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14L9 14C8.44772 14 8 13.5523 8 13ZM9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H9Z" fill="#ef4444"/>
+                </svg>
+                <small className='font-semibold text-gray-800 pr-1'>{file?.name}</small>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="text-gray-500 hover:cursor-pointer hover:text-red-500 w-4 h-4" onClick={()=>setFile("")}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+
+            </aside>
 
+        </section>
+    )
+}
 
 const FileSharingModal = ({setShowModal}) => {
-    const [fileName,setFileName] = useState("");
+    const [file,setFile] = useState("");
   return (
     <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center'>
         <main className='relative bg-white w-5/12 p-4 rounded-md flex flex-col items-stretch'>
@@ -11,15 +28,18 @@ const FileSharingModal = ({setShowModal}) => {
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
             <h1 className='text-2xl font-semibold'>Share a File</h1>
+
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Name of File</label>
                 <input className='border rounded border-text py-1.5 px-2' placeholder='Enter the name of file'/>
             </aside>
+
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Attachment</label>
-                <input type='file' className='border file rounded border-text py-1.5 px-2' onChange={({target: {files}})=>setFileName(files[0].name)} />
+                <input type='file' className='border file rounded border-text py-1.5 px-2' onChange={({target: {files}})=>setFile(files[0])} />
             </aside>
-           
+            <Attachment file={file} setFile={setFile}/>
+
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Tags</label>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-gray-500 hover:cursor-pointer">

From 209d54bd80491039cda637eacb00eee156307432 Mon Sep 17 00:00:00 2001
From: Wadad Parker <wadadparker5@gmail.com>
Date: Tue, 16 Jan 2024 03:16:23 +0530
Subject: [PATCH 3/6] feat: add tag

---
 src/components/modals/FileSharingModal.jsx | 53 ++++++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/modals/FileSharingModal.jsx b/src/components/modals/FileSharingModal.jsx
index aca2688..19b385f 100644
--- a/src/components/modals/FileSharingModal.jsx
+++ b/src/components/modals/FileSharingModal.jsx
@@ -1,12 +1,22 @@
 import React, { useState } from 'react'
 
+function getRandomColor() {
+    const letters = "0123456789ABCDEF";
+    let color = "#";
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+  
+
 const Attachment = ({file, setFile}) =>
 {
     return (
         <section className='flex flex-col space-y-1 border rounded border-text py-1.5 px-2 '>
             <aside className='flex rounded-sm p-0.5 items-center bg-blue-100 w-fit'>
                 <svg className='' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2V7L12 7.05441C11.9999 7.47848 11.9998 7.8906 12.0455 8.23052C12.097 8.61372 12.2226 9.051 12.5858 9.41421C12.949 9.77743 13.3863 9.90295 13.7695 9.95447C14.1094 10.0002 14.5215 10.0001 14.9456 10H14.9456H14.9456H14.9456L15 10H20V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H12ZM14 2.00462V7C14 7.49967 14.0021 7.77383 14.0277 7.96402L14.0287 7.97131L14.036 7.97231C14.2262 7.99788 14.5003 8 15 8H19.9954C19.9852 7.58836 19.9525 7.31595 19.8478 7.06306C19.6955 6.69552 19.4065 6.40649 18.8284 5.82843L16.1716 3.17157C15.5935 2.59351 15.3045 2.30448 14.9369 2.15224C14.684 2.04749 14.4116 2.01481 14 2.00462ZM8 13C8 12.4477 8.44772 12 9 12L15 12C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14L9 14C8.44772 14 8 13.5523 8 13ZM9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H9Z" fill="#ef4444"/>
+                    <path fillRule="evenodd" clipRule="evenodd" d="M12 2V7L12 7.05441C11.9999 7.47848 11.9998 7.8906 12.0455 8.23052C12.097 8.61372 12.2226 9.051 12.5858 9.41421C12.949 9.77743 13.3863 9.90295 13.7695 9.95447C14.1094 10.0002 14.5215 10.0001 14.9456 10H14.9456H14.9456H14.9456L15 10H20V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H12ZM14 2.00462V7C14 7.49967 14.0021 7.77383 14.0277 7.96402L14.0287 7.97131L14.036 7.97231C14.2262 7.99788 14.5003 8 15 8H19.9954C19.9852 7.58836 19.9525 7.31595 19.8478 7.06306C19.6955 6.69552 19.4065 6.40649 18.8284 5.82843L16.1716 3.17157C15.5935 2.59351 15.3045 2.30448 14.9369 2.15224C14.684 2.04749 14.4116 2.01481 14 2.00462ZM8 13C8 12.4477 8.44772 12 9 12L15 12C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14L9 14C8.44772 14 8 13.5523 8 13ZM9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H9Z" fill="#ef4444"/>
                 </svg>
                 <small className='font-semibold text-gray-800 pr-1'>{file?.name}</small>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="text-gray-500 hover:cursor-pointer hover:text-red-500 w-4 h-4" onClick={()=>setFile("")}>
@@ -19,15 +29,45 @@ const Attachment = ({file, setFile}) =>
     )
 }
 
+const AddTag = ({setTagFlag, setTags}) =>
+{
+    const [tag,setTag] = useState("");
+    const clickHandler = () =>
+    {
+        setTags(prev=>[...prev,tag]);
+        setTagFlag(false);
+    }
+    return (
+        <aside className='flex space-x-2'>
+            <input value={tag} onChange={(e)=>setTag(e.target.value)} className='px-1.5 border rounded-md border-gray-400 ' placeholder='Enter Tag Name'/>
+            <button className='px-1  rounded-lg text-green-500 hover:ring-1 hover:ring-green-400 disabled:text-gray-500 disabled:hover:cursor-not-allowed' disabled={tag==""} onClick={clickHandler}>Add Tag</button>
+            <button className='px-1  rounded-lg text-red-500 hover:ring-1 hover:ring-red-400' onClick={()=>setTagFlag(false)}>cancel</button>
+        </aside>
+    )
+}
+
+const Tags = () =>
+{
+    return (
+        <ul>
+            <li className={`bg-[${getRandomColor()}] p-1.5 rounded-full`}></li>
+        </ul>
+        
+    )
+}
+
 const FileSharingModal = ({setShowModal}) => {
     const [file,setFile] = useState("");
+    const [tagFlag,setTagFlag] = useState(false);
+    const [tags,setTags] = useState([]);
+    
   return (
     <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center'>
-        <main className='relative bg-white w-5/12 p-4 rounded-md flex flex-col items-stretch'>
+        <main className='relative bg-white w-[480px] py-4 px-6 rounded-md flex flex-col items-stretch'>
             <svg className="w-6 h-6 absolute right-5 top-5 hover:text-red-500 hover:cursor-pointer" onClick={()=>setShowModal(false)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
-            <h1 className='text-2xl font-semibold'>Share a File</h1>
+            <h1 className='text-2xl font-semibold mb-2'>Share a File</h1>
 
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Name of File</label>
@@ -42,11 +82,14 @@ const FileSharingModal = ({setShowModal}) => {
 
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Tags</label>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-gray-500 hover:cursor-pointer">
+                {tagFlag
+                ?<AddTag setTagFlag={setTagFlag} setTags={setTags} />
+                :<svg onClick={()=>setTagFlag(true)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-gray-500 hover:cursor-pointer">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                </svg>
+                </svg>}
 
             </aside>
+
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Path</label>
                 <input className='border rounded border-text py-1.5 px-2' placeholder='Enter the path of file'/>

From 1b80810f64cb7befa67638364a05337a8eda87e0 Mon Sep 17 00:00:00 2001
From: Wadad Parker <wadadparker5@gmail.com>
Date: Tue, 16 Jan 2024 03:43:46 +0530
Subject: [PATCH 4/6] feat: tags

---
 src/components/modals/FileSharingModal.jsx | 23 ++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/FileSharingModal.jsx b/src/components/modals/FileSharingModal.jsx
index 19b385f..33f9409 100644
--- a/src/components/modals/FileSharingModal.jsx
+++ b/src/components/modals/FileSharingModal.jsx
@@ -34,7 +34,7 @@ const AddTag = ({setTagFlag, setTags}) =>
     const [tag,setTag] = useState("");
     const clickHandler = () =>
     {
-        setTags(prev=>[...prev,tag]);
+        setTags(prev=>[...prev,{tag,color:getRandomColor()}]);
         setTagFlag(false);
     }
     return (
@@ -46,11 +46,17 @@ const AddTag = ({setTagFlag, setTags}) =>
     )
 }
 
-const Tags = () =>
+const Tags = ({tags,setTags}) =>
 {
     return (
-        <ul>
-            <li className={`bg-[${getRandomColor()}] p-1.5 rounded-full`}></li>
+        <ul className='flex space-x-2 flex-wrap '>
+            {tags.map(({tag,color})=>(
+             <li className='bg-[${color}] mb-1 px-3 py-0.5 rounded-full flex items-center space-x-1.5' style={{backgroundColor:color}}>
+                <span className='text-white'>{tag}</span>
+                <svg className="w-4 h-4 text-white hover:cursor-pointer" onClick={()=>setTags(prev=>prev.filter(item=>item.tag!==tag))} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </li>))}
         </ul>
         
     )
@@ -84,9 +90,14 @@ const FileSharingModal = ({setShowModal}) => {
                 <label  className='text-gray-600 font-semibold'>Add Tags</label>
                 {tagFlag
                 ?<AddTag setTagFlag={setTagFlag} setTags={setTags} />
-                :<svg onClick={()=>setTagFlag(true)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-gray-500 hover:cursor-pointer">
+                :(<aside className='flex items-center'>
+                <Tags tags={tags} setTags={setTags}/>
+                <svg onClick={()=>setTagFlag(true)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-gray-500 hover:cursor-pointer mb-1 ml-1">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                </svg>}
+                </svg>
+                </aside>
+                )
+                }
 
             </aside>
 

From d911662899d1b152e712af12be8f7479e6d55d0e Mon Sep 17 00:00:00 2001
From: Wadad Parker <wadadparker5@gmail.com>
Date: Tue, 16 Jan 2024 04:26:47 +0530
Subject: [PATCH 5/6] feat: add images in attachment

---
 src/components/modals/FileSharingModal.jsx | 26 ++++++++++++++--------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/modals/FileSharingModal.jsx b/src/components/modals/FileSharingModal.jsx
index 33f9409..602e18b 100644
--- a/src/components/modals/FileSharingModal.jsx
+++ b/src/components/modals/FileSharingModal.jsx
@@ -15,9 +15,14 @@ const Attachment = ({file, setFile}) =>
     return (
         <section className='flex flex-col space-y-1 border rounded border-text py-1.5 px-2 '>
             <aside className='flex rounded-sm p-0.5 items-center bg-blue-100 w-fit'>
-                <svg className='' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                {file.type === 'application/pdf'
+                ?<svg className='' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd" clipRule="evenodd" d="M12 2V7L12 7.05441C11.9999 7.47848 11.9998 7.8906 12.0455 8.23052C12.097 8.61372 12.2226 9.051 12.5858 9.41421C12.949 9.77743 13.3863 9.90295 13.7695 9.95447C14.1094 10.0002 14.5215 10.0001 14.9456 10H14.9456H14.9456H14.9456L15 10H20V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H12ZM14 2.00462V7C14 7.49967 14.0021 7.77383 14.0277 7.96402L14.0287 7.97131L14.036 7.97231C14.2262 7.99788 14.5003 8 15 8H19.9954C19.9852 7.58836 19.9525 7.31595 19.8478 7.06306C19.6955 6.69552 19.4065 6.40649 18.8284 5.82843L16.1716 3.17157C15.5935 2.59351 15.3045 2.30448 14.9369 2.15224C14.684 2.04749 14.4116 2.01481 14 2.00462ZM8 13C8 12.4477 8.44772 12 9 12L15 12C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14L9 14C8.44772 14 8 13.5523 8 13ZM9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H9Z" fill="#ef4444"/>
                 </svg>
+                :<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 mr-1">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                </svg>}
+
                 <small className='font-semibold text-gray-800 pr-1'>{file?.name}</small>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="text-gray-500 hover:cursor-pointer hover:text-red-500 w-4 h-4" onClick={()=>setFile("")}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
@@ -38,7 +43,7 @@ const AddTag = ({setTagFlag, setTags}) =>
         setTagFlag(false);
     }
     return (
-        <aside className='flex space-x-2'>
+        <aside className='flex space-x-2 pb-0.5'>
             <input value={tag} onChange={(e)=>setTag(e.target.value)} className='px-1.5 border rounded-md border-gray-400 ' placeholder='Enter Tag Name'/>
             <button className='px-1  rounded-lg text-green-500 hover:ring-1 hover:ring-green-400 disabled:text-gray-500 disabled:hover:cursor-not-allowed' disabled={tag==""} onClick={clickHandler}>Add Tag</button>
             <button className='px-1  rounded-lg text-red-500 hover:ring-1 hover:ring-red-400' onClick={()=>setTagFlag(false)}>cancel</button>
@@ -52,7 +57,7 @@ const Tags = ({tags,setTags}) =>
         <ul className='flex space-x-2 flex-wrap '>
             {tags.map(({tag,color})=>(
              <li className='bg-[${color}] mb-1 px-3 py-0.5 rounded-full flex items-center space-x-1.5' style={{backgroundColor:color}}>
-                <span className='text-white'>{tag}</span>
+                <span className='text-white text-sm'>{tag}</span>
                 <svg className="w-4 h-4 text-white hover:cursor-pointer" onClick={()=>setTags(prev=>prev.filter(item=>item.tag!==tag))} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
@@ -63,28 +68,31 @@ const Tags = ({tags,setTags}) =>
 }
 
 const FileSharingModal = ({setShowModal}) => {
+    const [name,setName] = useState("");
     const [file,setFile] = useState("");
     const [tagFlag,setTagFlag] = useState(false);
     const [tags,setTags] = useState([]);
     
   return (
-    <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center'>
-        <main className='relative bg-white w-[480px] py-4 px-6 rounded-md flex flex-col items-stretch'>
+    <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center '>
+        <main className='relative bg-white w-[480px] py-4 px-6 rounded-md flex flex-col items-stretch space-y-2'>
             <svg className="w-6 h-6 absolute right-5 top-5 hover:text-red-500 hover:cursor-pointer" onClick={()=>setShowModal(false)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
-            <h1 className='text-2xl font-semibold mb-2'>Share a File</h1>
+            <h1 className='text-2xl font-semibold pb-2'>Share a File</h1>
 
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Name of File</label>
-                <input className='border rounded border-text py-1.5 px-2' placeholder='Enter the name of file'/>
+                <input value={name} className='border rounded border-text py-1.5 px-2' placeholder='Enter the name of file' onChange={(e)=>setName(e.target.value)}/>
             </aside>
 
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Attachment</label>
-                <input type='file' className='border file rounded border-text py-1.5 px-2' onChange={({target: {files}})=>setFile(files[0])} />
+               {file===""
+                ?<input type='file' accept='.pdf, .jpeg, .jpg, .mp4, .png' className='border file rounded border-text pt-1.5 pb-1 px-2' onChange={({target: {files}})=>setFile(files[0])} />
+                :<Attachment file={file} setFile={setFile}/>}
+                <small className='text-gray-500'>Only pdf, images and videos allowed</small>
             </aside>
-            <Attachment file={file} setFile={setFile}/>
 
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Tags</label>

From 539f04f742326e14458c63d91d6660e24d44b7db Mon Sep 17 00:00:00 2001
From: Wadad Parker <wadadparker5@gmail.com>
Date: Tue, 16 Jan 2024 05:28:58 +0530
Subject: [PATCH 6/6] feat: Add path with regex

---
 src/components/modals/FileSharingModal.jsx | 28 ++++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/modals/FileSharingModal.jsx b/src/components/modals/FileSharingModal.jsx
index 602e18b..1326a80 100644
--- a/src/components/modals/FileSharingModal.jsx
+++ b/src/components/modals/FileSharingModal.jsx
@@ -72,10 +72,18 @@ const FileSharingModal = ({setShowModal}) => {
     const [file,setFile] = useState("");
     const [tagFlag,setTagFlag] = useState(false);
     const [tags,setTags] = useState([]);
+    const [path,setPath] = useState("");
+
+    const isDisabled = () => name==="" || file==="" || tags.length===0 || path===""
+
+    const clickHandler = () =>
+    {
+        // Enter function to handle share file click
+    }
     
   return (
-    <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center '>
-        <main className='relative bg-white w-[480px] py-4 px-6 rounded-md flex flex-col items-stretch space-y-2'>
+    <div className='w-screen h-screen bg-black/40 fixed z-30 flex justify-center items-center  '>
+        <main className='relative bg-white w-[480px] py-4 px-6 rounded-md flex flex-col items-stretch space-y-2 max-sm:h-full max-sm:w-full'>
             <svg className="w-6 h-6 absolute right-5 top-5 hover:text-red-500 hover:cursor-pointer" onClick={()=>setShowModal(false)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -111,10 +119,20 @@ const FileSharingModal = ({setShowModal}) => {
 
             <aside className='flex flex-col space-y-1'>
                 <label  className='text-gray-600 font-semibold'>Add Path</label>
-                <input className='border rounded border-text py-1.5 px-2' placeholder='Enter the path of file'/>
-                <small className='text-text font-semibold'>The Above means that in File Section it will be saved in Paper folder in Endsem folder in Exams folder</small>
+                <input value={path}  className='border rounded border-text py-1.5 px-2 font-semibold' placeholder='Enter the path of file' onChange={(e) => {
+                    const inputValue = e.target.value.replace(/[^a-zA-Z0-9/]/g, '');
+                    setPath(inputValue);
+                    }}/>
+                { <small className={`text-text font-semibold ${path===""?"invisible":"visible"}`}>
+                   <span>The Above means that in File Section it will be saved in </span>
+                    {path.split('/').reverse().map((folder, index, array) => (
+                    <span key={folder}>
+                        {folder} folder{index < array.length - 1 ? ' in ' : ''}
+                    </span>
+                    ))}
+                </small>}
             </aside>
-            <button className='text-white bg-primary py-2 px-4 rounded-md self-end' >Share File</button>
+            <button className='text-white bg-primary py-2 px-4 rounded-md self-end disabled:brightness-50 disabled:hover:cursor-not-allowed' disabled={isDisabled()} onClick={clickHandler}>Share File</button>
         </main>
     </div>
   )