update

src/App.js

@@ -117,7 +117,7 @@ function App() {
         </div> */}
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
-        {/* <FileManager /> */}
+        <FileManager />
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
         {/* <Blogs /> */}

src/components/PopupCard/index.js

@@ -6,6 +6,7 @@ import calender from "./calender.svg";
 
 const PopupCard = ({ textArea }) => {
   const [activeInput, setActiveInput] = useState(false);
+  const [checklist, setChecklist] = useState(0);
 
   return (
     <section className="">
@@ -76,13 +77,10 @@ const PopupCard = ({ textArea }) => {
               {/* divider */}
               <div className="border border-[#DBDBDB] my-5"></div>
               {/* middle */}
-              <div className="flex">
+              <div className="flex flex-row">
                 {/* right */}
-                <div className="flex flex-col">
+                <div className="flex flex-col w-1/2">
-                  <span
+                  <span class="resize-y relative w-full h-fit p-4 text-justify border-2 rounded-md text-sm border-[#06BACE] focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]">
-                    class="resize-y relative w-1/2 h-fit p-4 text-justify border-2 rounded-md text-sm border-[#06BACE]
-                focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-                  >
                     {textArea}
                   </span>
                   <span
@@ -90,13 +88,49 @@ const PopupCard = ({ textArea }) => {
                   >
                     نام کارت
                   </span>
-                  <div className="my-5">
+                  <div className="my-5 flex flex-col">
-                    <input type="checkbox" />
+                    <div>
-                    <span className="text-sm mr-2">چک لیست ها</span>
+                      <input
+                        type="checkbox"
+                        className="form-checkbox text-green-500"
+                      />
+                      <span className="text-sm mr-2">چک لیست ها</span>
+                    </div>
+                    {checklist}
+                    <textarea class="resize-y rounded-md my-5 text-sm border-[#06BACE] focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"></textarea>
+                    <div>
+                      <input
+                        type="checkbox"
+                        className="form-checkbox text-green-500"
+                        onClick={() => setChecklist(checklist + 25)}
+                      />
+                      <span className="text-sm mr-2">چک لیست ها</span>
+                    </div>
+                    <div>
+                      <input
+                        type="checkbox"
+                        className="form-checkbox text-green-500"
+                        onClick={() => setChecklist(checklist + 25)}
+                      />
+                      <span className="text-sm mr-2">چک لیست ها</span>
+                    </div>
                   </div>
                 </div>
                 {/* divider */}
-                <div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
+                <div className="bg-[#DBDBDB] w-1 mx-5"></div>
+                {/* left */}
+                <div date-rangepicker className="flex items-center w-1/2">
+                  <div className="relative w-full">
+                    <img src={calender} className="absolute top-3 left-2" />
+                    <input
+                      name="start"
+                      type="text"
+                      className="w-full border-2 border-blue-400 rounded-md text-sm h-12
+                    focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
+                      placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>