feat(dashboard-v2): add CurrentUsage component
This commit is contained in:
Michał Leszczyk
parent
0c59cc27c1
commit
92c2860ccb
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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;
|
||||||
|
`;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import CurrentUsage from "./CurrentUsage";
|
||||||
|
|
||||||
|
export default CurrentUsage;
|
||||||
|
|
@ -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 |
|
|
@ -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"
|
||||||
|
|
|
||||||
Reference in New Issue