update

src/App.js

@@ -53,6 +53,7 @@ import FileManager from "./components/FileManager";
 import Playlist from "./components/Playlist";
 import Folderlists from "./components/Folderlist";
 import CardHolder from "./components/CardHolder";
+import UploadFile from "./components/UploadFile";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -113,7 +114,8 @@ function App() {
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
         {/* <Blogs /> */}
-        <CardHolder />
+        {/* <CardHolder /> */}
+        <UploadFile />
       </div>
     </Provider>
   );

src/components/CardHolder/index.js

@@ -11,13 +11,21 @@ const CardHolder = ({
 }) => {
   return (
     <div
-      className={`bg-white m-20 ${cardBorder} ${cardBorderRadius}`}
+      className={`w-fit bg-white px-4 py-1 flex flex-row items-center ${cardBorder} ${cardBorderRadius}`}
       style={{
         backgroundColor: cardBackgroundColor,
         borderColor: cardBorderColor,
       }}
     >
       <img src={cardImage} className="w-20" />
+      <div className="flex flex-col mr-2">
+        <p style={{ color: "#00253A" }} className="text-sm">
+          فضای ذخیره سازی گوگل درایو
+        </p>
+        <p className="text-xs text-gray-400 font-light mr-1 mt-2">
+          فضای باقیمانده 40 گیگابایت از 1000 گیگابایت
+        </p>
+      </div>
     </div>
   );
 };

src/components/UploadFile/images/file.svg

@@ -0,0 +1,8 @@
+<svg id="vuesax_bulk_gallery" data-name="vuesax/bulk/gallery" xmlns="http://www.w3.org/2000/svg" width="65.239" height="65.239" viewBox="0 0 65.239 65.239">
+  <g id="gallery">
+    <path id="Vector" d="M54.366,15.793V32.348l-4.431-3.806a6.06,6.06,0,0,0-7.666,0l-11.308,9.7a6.06,6.06,0,0,1-7.666,0l-.924-.761A6.037,6.037,0,0,0,15.2,37.1L1.821,46.075l-.3.217A18.275,18.275,0,0,1,0,38.573V15.793C0,5.9,5.9,0,15.793,0H38.573C48.467,0,54.366,5.9,54.366,15.793Z" transform="translate(5.437 5.437)" fill="#65a9ff" opacity="0.29"/>
+    <path id="Vector-2" data-name="Vector" d="M12.939,6.47A6.47,6.47,0,1,1,6.47,0,6.47,6.47,0,0,1,12.939,6.47Z" transform="translate(17.995 15.277)" fill="#65a9ff"/>
+    <path id="Vector-3" data-name="Vector" d="M52.844,5.172V11.4c0,9.895-5.9,15.793-15.793,15.793H14.271C7.339,27.19,2.338,24.281,0,19.116L.3,18.9l13.374-8.97a6.037,6.037,0,0,1,7.176.381l.924.761a6.06,6.06,0,0,0,7.666,0l11.308-9.7a6.06,6.06,0,0,1,7.666,0Z" transform="translate(6.959 32.613)" fill="#65a9ff"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H65.239V65.239H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/UploadFile/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+import file from "./images/file.svg";
+
+const index = () => {
+  return (
+    <div className="bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
+      <div className=" cursor-pointer">
+        <img src={file} className="cursor-pointer relative" />
+        <input
+          type="file"
+          className="absolute top-10 opacity-0"
+          style={{ right: "0px" }}
+          name=""
+        />
+      </div>
+      <p className="text-sm mt-5">
+        یک فایل را اینجا بکشید یا از{" "}
+        <span className="text-blue-300">رایانه خود انتخاب کنید</span>
+      </p>
+    </div>
+  );
+};
+
+export default index;