file manager added and updated

src/components/FileManager/index.js

@@ -6,15 +6,16 @@ import TitleSubtitle from "../TitleSubtitle";
 import CardHolder from "../CardHolder";
 
 import graySearchIcon from "./images/gray-search-icon.svg";
+import Playlist from "../Playlist";
 
 const FileManager = () => {
   return (
     <div
       style={{ backgroundColor: "#FBFBFB" }}
-      className="px-7 py-5 flex flex-row"
+      className="flex flex-row px-7 py-5"
     >
       {/* ? right Section */}
-      <div className="flex-1">
+      <div className="flex-1 ">
         {/* ? breadCrumb */}
         <div className="mb-5">
           <BreadCrumb />
@@ -34,8 +35,11 @@ const FileManager = () => {
             />
           </div>
         </div>
+        {/* cardHolder */}
+        <Playlist />
       </div>
-      {/* left Section */} <CardHolder />
+      {/* left Section */}
+      <CardHolder />
     </div>
   );
 };

src/components/Playlist/index.js

@@ -8,10 +8,10 @@ import videoPlay from "./images/video-play.svg";
 
 const Playlist = ({ items }) => {
   return (
-    <section className="flex flex-row items-center justify-around mt-5">
+    <section className="flex flex-row items-center justify-between mt-7">
       {items.map((item, index) => (
         <div
-          className="flex flex-row items-center bg-white border-2 rounded-lg p-4 "
+          className="flex flex-row items-center bg-white border-2 rounded-lg px-2 py-4"
           style={{ borderColor: "#EEEEEE" }}
           key={index}
         >
@@ -26,10 +26,16 @@ const Playlist = ({ items }) => {
           </div>
           <div className="flex flex-col items-center mr-3">
             <p style={{ color: "#132F52" }} className="font-bold text-xs">
-              {item.memory} <span className="font-light">گیگابایت</span>{" "}
+              {item.memory}{" "}
+              <span className="font-light" style={{ fontSize: "10px" }}>
+                گیگابایت
+              </span>
             </p>
             <p style={{ color: "#132F52" }} className="font-bold text-xs mt-2">
-              {item.fileNum} <span className="font-light">فایل</span>{" "}
+              {item.fileNum}{" "}
+              <span className="font-light" style={{ fontSize: "10px" }}>
+                فایل
+              </span>{" "}
             </p>
           </div>
         </div>