From d366552105ee4eaad3d3f0e5a3d2fbabda4b7f74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Feb 2022 11:55:52 +0100
Subject: [PATCH] feat(dashboard-v2): compose main page

---
 packages/dashboard-v2/src/pages/index.js | 60 +++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js
index 9bf765cb..de646239 100644
--- a/packages/dashboard-v2/src/pages/index.js
+++ b/packages/dashboard-v2/src/pages/index.js
@@ -1,9 +1,67 @@
 import * as React from "react";
+import { useMedia } from "react-use";
 
+import theme from "../lib/theme";
+import { ArrowRightIcon } from "../components/Icons";
+import { Panel } from "../components/Panel";
+import { Tab, TabPanel, Tabs } from "../components/Tabs";
+import LatestActivity from "../components/LatestActivity/LatestActivity";
 import DashboardLayout from "../layouts/DashboardLayout";
+import Slider from "../components/Slider/Slider";
+import CurrentUsage from "../components/CurrentUsage";
 
 const IndexPage = () => {
-  return <>Dashboard</>;
+  const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`);
+
+  return (
+    <>
+      <div className="w-full">
+        <Slider
+          slides={[
+            <Panel title="Upload">
+              <Tabs variant="fill">
+                <Tab id="files" title="Files" />
+                <Tab id="directory" title="Directory" />
+                <TabPanel tabId="files">
+                  <div className="w-full py-16 bg-palette-100/50 text-center">Upload files...</div>
+                </TabPanel>
+                <TabPanel tabId="directory">
+                  <div className="w-full py-16 bg-palette-100/50 text-center">Upload a directory...</div>
+                </TabPanel>
+              </Tabs>
+            </Panel>,
+            <Panel
+              title={
+                <>
+                  <ArrowRightIcon /> Usage
+                </>
+              }
+            >
+              <CurrentUsage />
+            </Panel>,
+            <Panel
+              title={
+                <>
+                  <ArrowRightIcon /> Current plan
+                </>
+              }
+            >
+              <ul>
+                <li>Current</li>
+                <li>Plan</li>
+                <li>Info</li>
+              </ul>
+            </Panel>,
+          ]}
+        ></Slider>
+      </div>
+      {showRecentActivity && (
+        <div className="mt-10">
+          <LatestActivity />
+        </div>
+      )}
+    </>
+  );
 };
 
 IndexPage.Layout = DashboardLayout;