feat(dashboard-v2): add CurrentUsage component

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",

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 (
+    <>
+      <h4>{`${size(storageUsed)} of ${size(storageLimit)}`}</h4>
+      <p className="text-palette-400">
+        {filesUsed} of {filesLimit} files
+      </p>
+      <div className="relative mt-7 font-sans uppercase text-xs">
+        <div className="flex place-content-between">
+          <span>Storage</span>
+          <span>{`${size(storageLimit)}`}</span>
+        </div>
+        <UsageGraph>
+          <GraphBar value={storageUsed} limit={storageLimit} label={size(storageUsed)} />
+          <GraphBar value={filesUsed} limit={filesLimit} label={{ value: filesUsed, unit: "files" }} />
+        </UsageGraph>
+        <div className="flex place-content-between">
+          <span>Files</span>
+          <span className="inline-flex place-content-between w-[37%]">
+            <Link
+              to="/upgrade"
+              className="text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline"
+            >
+              UPGRADE
+            </Link>{" "}
+            {/* TODO: proper URL */}
+            <span>{filesLimit}</span>
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}

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 (
+    <div className="relative flex items-center">
+      <Bar $percentage={percentage}>
+        <BarTip />
+      </Bar>
+      <BarLabel $percentage={percentage}>
+        <span className="font-sora text-lg">{label.value}</span> <span>{label.unit}</span>
+      </BarLabel>
+    </div>
+  );
+};

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;
+`;

packages/dashboard-v2/src/components/CurrentUsage/index.js

@@ -0,0 +1,3 @@
+import CurrentUsage from "./CurrentUsage";
+
+export default CurrentUsage;

packages/dashboard-v2/static/images/usage-graph-bg.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 378 146" preserveAspectRatio="none">
+  <defs>
+    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="8" height="8">
+      <path d="M-2,2 l6,-6
+              M0,8 l8,-8
+              M7,10 l6,-6" stroke="#d4dddb" />
+    </pattern>
+    <style>.cls-1{fill:#f5f7f7;}.cls-2{fill:#d4dddb; opacity: 0.5;}.cls-3{fill:url(#diagonalHatch);}.cls-4{fill:#80e3af;}</style>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <rect class="cls-1" width="2" height="146" rx="1"/>
+      <rect class="cls-1" x="4" width="4" height="146" rx="2"/>
+      <rect class="cls-1" x="10" width="6" height="146" rx="2"/>
+      <rect class="cls-1" x="18" width="8" height="146" rx="2"/>
+      <rect class="cls-1" x="28" width="10" height="146" rx="2"/>
+      <rect class="cls-1" x="40" width="12" height="146" rx="2"/>
+      <rect class="cls-1" x="54" width="14" height="146" rx="2"/>
+      <rect class="cls-1" x="70" width="16" height="146" rx="2"/>
+      <rect class="cls-1" x="88" width="18" height="146" rx="2"/>
+      <rect class="cls-1" x="108" width="20" height="146" rx="2"/>
+      <rect class="cls-1" x="130" width="22" height="146" rx="2"/>
+      <rect class="cls-1" x="154" width="24" height="146" rx="2"/>
+      <rect class="cls-1" x="180" width="26" height="146" rx="2"/>
+      <rect class="cls-1" x="208" width="28" height="146" rx="2"/>
+      <rect class="cls-2" x="238" width="30" height="146" rx="2"/>
+      <rect class="cls-2" x="270" width="32" height="146" rx="2"/>
+      <rect class="cls-2" x="304" width="34" height="146" rx="2"/>
+      <rect class="cls-3" x="340" width="38" height="146" rx="2"/>
+      <path class="cls-4" d="M304,144h34a0,0,0,0,1,0,0v0a2,2,0,0,1-2,2H306a2,2,0,0,1-2-2v0A0,0,0,0,1,304,144Z"/>
+      <path class="cls-4" d="M270,144h32a0,0,0,0,1,0,0v0a2,2,0,0,1-2,2H272a2,2,0,0,1-2-2v0A0,0,0,0,1,270,144Z"/>
+      <path class="cls-4" d="M238,144h30a0,0,0,0,1,0,0v0a2,2,0,0,1-2,2H240a2,2,0,0,1-2-2v0A0,0,0,0,1,238,144Z"/>
+    </g>
+  </g>
+</svg>

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"