diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json
index 5711b22b..de7496c5 100644
--- a/packages/dashboard-v2/package.json
+++ b/packages/dashboard-v2/package.json
@@ -21,6 +21,7 @@
"dependencies": {
"@fontsource/sora": "^4.5.3",
"@fontsource/source-sans-pro": "^4.5.3",
+ "byte-size": "^8.1.0",
"gatsby": "^4.6.2",
"gatsby-plugin-postcss": "^5.7.0",
"postcss": "^8.4.6",
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
new file mode 100644
index 00000000..8b0bb596
--- /dev/null
+++ b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
@@ -0,0 +1,52 @@
+import * as React from "react";
+import fileSize from "byte-size";
+import { Link } from "gatsby";
+
+import { GraphBar } from "./GraphBar";
+import { UsageGraph } from "./UsageGraph";
+
+// TODO: get real data
+const useUsageData = () => ({
+ filesUsed: 19_521,
+ filesLimit: 20_000,
+ storageUsed: 23_000_000_000,
+ storageLimit: 1_000_000_000_000,
+});
+
+const size = (bytes) => fileSize(bytes, { precision: 0 });
+
+export default function CurrentUsage() {
+ const { filesUsed, filesLimit, storageUsed, storageLimit } = useUsageData();
+
+ return (
+ <>
+
{`${size(storageUsed)} of ${size(storageLimit)}`}
+
+ {filesUsed} of {filesLimit} files
+
+
+
+ Storage
+ {`${size(storageLimit)}`}
+
+
+
+
+
+
+ Files
+
+
+ UPGRADE
+ {" "}
+ {/* TODO: proper URL */}
+ {filesLimit}
+
+
+
+ >
+ );
+}
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
new file mode 100644
index 00000000..341eb99c
--- /dev/null
+++ b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const Bar = styled.div.attrs({
+ className: `relative flex justify-end h-4 bg-primary rounded-l rounded-r-lg`,
+})`
+ min-width: 1rem;
+ width: ${({ $percentage }) => $percentage}%;
+`;
+
+const BarTip = styled.span.attrs({
+ className: "relative w-4 h-4 border-2 rounded-full bg-white border-primary",
+})``;
+
+const BarLabel = styled.span.attrs({
+ className: "bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow",
+})`
+ right: max(0%, ${({ $percentage }) => 100 - $percentage}%);
+ top: -0.5rem;
+ transform: translateX(50%);
+`;
+
+export const GraphBar = ({ value, limit, label }) => {
+ const percentage = (value / limit) * 100;
+
+ return (
+
+
+
+
+
+ {label.value} {label.unit}
+
+
+ );
+};
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
new file mode 100644
index 00000000..3f6f23c2
--- /dev/null
+++ b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const UsageGraph = styled.div.attrs({
+ className: "w-full my-3 grid grid-flow-row grid-rows-2",
+})`
+ height: 146px;
+ background: url(/images/usage-graph-bg.svg) no-repeat;
+ background-size: cover;
+`;
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/index.js b/packages/dashboard-v2/src/components/CurrentUsage/index.js
new file mode 100644
index 00000000..802aa4e1
--- /dev/null
+++ b/packages/dashboard-v2/src/components/CurrentUsage/index.js
@@ -0,0 +1,3 @@
+import CurrentUsage from "./CurrentUsage";
+
+export default CurrentUsage;
diff --git a/packages/dashboard-v2/static/images/usage-graph-bg.svg b/packages/dashboard-v2/static/images/usage-graph-bg.svg
new file mode 100644
index 00000000..be055905
--- /dev/null
+++ b/packages/dashboard-v2/static/images/usage-graph-bg.svg
@@ -0,0 +1,35 @@
+
diff --git a/packages/dashboard-v2/yarn.lock b/packages/dashboard-v2/yarn.lock
index 1de87766..674685bb 100644
--- a/packages/dashboard-v2/yarn.lock
+++ b/packages/dashboard-v2/yarn.lock
@@ -5127,6 +5127,11 @@ busboy@^0.2.11:
dicer "0.2.5"
readable-stream "1.1.x"
+byte-size@^8.1.0:
+ version "8.1.0"
+ resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-8.1.0.tgz#6353d0bc14ab7a69abcefbf11f8db0145a862cb5"
+ integrity sha512-FkgMTAg44I0JtEaUAvuZTtU2a2YDmBRbQxdsQNSMtLCjhG0hMcF5b1IMN9UjSCJaU4nvlj/GER7B9sI4nKdCgA==
+
bytes@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"