feat(dashboard-v2): add ActivityTable component

2022-02-23 11:49:36 +01:00 · 2022-02-23 11:49:36 +01:00 · 0c59cc27c1
parent f6496f0358
commit 0c59cc27c1
4 changed files with 103 additions and 0 deletions
--- a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
@ -0,0 +1,22 @@
+import * as React from "react";
+import { Table, TableBody, TableCell, TableRow } from "../Table";
+
+export default function ActivityTable({ data }) {
+  return (
+    <Table style={{ tableLayout: "fixed" }}>
+      <TableBody>
+        {data.map(({ name, type, size, uploaded, skylink }) => (
+          <TableRow key={skylink}>
+            <TableCell>{name}</TableCell>
+            <TableCell width="80px">{type}</TableCell>
+            <TableCell width="80px" align="right">
+              {size}
+            </TableCell>
+            <TableCell width="180px">{uploaded}</TableCell>
+            <TableCell>{skylink}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
--- a/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
@ -0,0 +1,24 @@
+import * as React from "react";
+import { Panel } from "../Panel";
+import { Tab, TabPanel, Tabs } from "../Tabs";
+import ActivityTable from "./ActivityTable";
+import useRecentActivityData from "./useActivityData";
+
+export default function LatestActivity() {
+  const { downloads, uploads } = useRecentActivityData();
+
+  return (
+    <Panel title="Latest activity">
+      <Tabs>
+        <Tab id="uploads" title="Uploads" />
+        <Tab id="downloads" title="Downloads" />
+        <TabPanel tabId="uploads" className="pt-4">
+          <ActivityTable data={uploads} />
+        </TabPanel>
+        <TabPanel tabId="downloads" className="pt-4">
+          <ActivityTable data={downloads} />
+        </TabPanel>
+      </Tabs>
+    </Panel>
+  );
+}
--- a/packages/dashboard-v2/src/components/LatestActivity/index.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/index.js
@ -0,0 +1,3 @@
+import LatestActivity from "./LatestActivity";
+
+export default LatestActivity;
--- a/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js
@ -0,0 +1,54 @@
+const UPLOADS_DATA = [
+  {
+    name: "At_vereo_eos_censes",
+    type: ".mp4",
+    size: "2.45 MB",
+    uploaded: "a few seconds ago",
+    skylink: "_HyFqH632Rmy99c93idTtBVXeRDgaDAAWg6Bmm5P1izriu",
+  },
+  {
+    name: "Miriam Klein IV",
+    type: ".pdf",
+    size: "7.52 MB",
+    uploaded: "01/04/2021; 17:11",
+    skylink: "_izriuHyFqH632Rmy99c93idTtBVXeRDgaDAAWg6Bmm5P1",
+  },
+  {
+    name: "tmp/QmWR6eVDVkwhAYq7X99w4xT9KNKBzwK39Fj1PDmr4ZnzMm/QmWR6eVDVkwhAYq7X99w4xT9KNKBzwK39Fj1PDmr4ZnzMm",
+    type: ".doc",
+    size: "8.15 MB",
+    uploaded: "10/26/2020; 7:21",
+    skylink: "_VXeRDgaDAAWg6Bmm5P1izriuHyFqH632Rmy99c93idTtB",
+  },
+  {
+    name: "Perm_London",
+    type: ".avi",
+    size: "225.6 MB",
+    uploaded: "09/12/2020; 19:28",
+    skylink: "_eRDgaDAAWg6Bmm5P1izriuHyFqH632Rmy99c93idTtBVX",
+  },
+  {
+    name: "Santa_Clara",
+    type: ".pdf",
+    size: "7.52 MB",
+    uploaded: "09/12/2020; 19:23",
+    skylink: "_AWg6Bmm5P1izriuHyFqH632Rmy99c93idTtBVXeRDgaDA",
+  },
+  {
+    name: "Marysa_Labrone",
+    type: ".doc",
+    size: "8.15 MB",
+    uploaded: "09/12/2020; 19:21",
+    skylink: "_P1izriuHyFqH632Rmy99c93idTtBVXeRDgaDAAWg6Bmm5",
+  },
+];
+
+const DOWNLOADS_DATA = UPLOADS_DATA.slice().reverse();
+
+// TODO: get real data
+export default function useRecentActivityData() {
+  return {
+    uploads: UPLOADS_DATA,
+    downloads: DOWNLOADS_DATA,
+  };
+}