feat(dashboard-v2): add CurrentUsage component

This commit is contained in:
Michał Leszczyk 2022-02-23 11:49:57 +01:00
parent 0c59cc27c1
commit 92c2860ccb
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
7 changed files with 140 additions and 0 deletions

View File

@ -21,6 +21,7 @@
"dependencies": { "dependencies": {
"@fontsource/sora": "^4.5.3", "@fontsource/sora": "^4.5.3",
"@fontsource/source-sans-pro": "^4.5.3", "@fontsource/source-sans-pro": "^4.5.3",
"byte-size": "^8.1.0",
"gatsby": "^4.6.2", "gatsby": "^4.6.2",
"gatsby-plugin-postcss": "^5.7.0", "gatsby-plugin-postcss": "^5.7.0",
"postcss": "^8.4.6", "postcss": "^8.4.6",

View File

@ -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>
</>
);
}

View File

@ -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>
);
};

View File

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

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -5127,6 +5127,11 @@ busboy@^0.2.11:
dicer "0.2.5" dicer "0.2.5"
readable-stream "1.1.x" 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: bytes@3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"