Added upload and delete apis

src/helpers/AllDataList.jsx

@@ -0,0 +1,68 @@
+const tableData = [
+    {
+      name: "Documentation Miyagi",
+      favourite: true,
+      tag: "Work",
+      tagColor: "btn-blue",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/fileicon.png"
+    },
+    {
+      name: "Magical-Retreat-2020.jpg",
+      favourite: false,
+      tag: "Music",
+      tagColor: "btn-red",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/videoicon.png"
+    },
+    {
+      name: "Use-This-Meme.jpg",
+      favourite: false,
+      tag: "Bills",
+      tagColor: "btn-yellow",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/memeicon.png"
+    },
+    {
+      name: "Documentation",
+      favourite: true,
+      tag: "Office",
+      tagColor: "btn-green",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/documentationicon.svg"
+    },
+    {
+      name: "Table Documentation",
+      favourite: false,
+      tag: "Video",
+      tagColor: "btn-purple",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/videoicon.svg"
+    },
+    {
+      name: "Drigma-Video.mp4",
+      favourite: true,
+      tag: "Music",
+      tagColor: "btn-red",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/videoicon.svg"
+    },
+    {
+      name: "Figma-Tutorial.mp4",
+      favourite: true,
+      tag: "Video",
+      tagColor: "btn-purple",
+      syncStatus: "Images/homepage/syncblue.svg",
+      shareDate: "10/28/12",
+      favIcon: "Images/homepage/videoicon.svg"
+    }
+  ];
+
+  export default tableData;
+

src/helpers/Loader.css

@@ -0,0 +1,35 @@
+.loader {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    right: 40%;
+  }
+  .loader:before , .loader:after {
+      content: '';
+      width: 15px;
+      height: 15px;
+      display: inline-block;
+      position: relative;
+      margin: 0  5px  ;
+      border-radius: 50%;
+      color: #2184e5;
+      background: currentColor;
+      box-shadow: 50px 0 ,  -50px 0;
+      animation: left 1s infinite ease-in-out;
+    }
+    .loader:after {
+      color: #FF3D00;
+      animation: right 1.1s infinite ease-in-out;
+    }
+
+
+  @keyframes right {
+    0% , 100%{transform: translateY(-10px) }
+    50% { transform: translateY(10px) }
+  }
+
+  @keyframes left {
+    0% , 100%{ transform: translateY(10px) }
+    50% { transform: translateY(-10px) }
+  }
+

src/helpers/Loader.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Loader.css";
+
+const Loader = ({ visible }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return <span class="loader"></span>;
+};
+
+export default Loader;