From d24b7ba6369ac7553ad1f289135a2361bd82a054 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Tue, 20 Aug 2024 15:57:59 +0200
Subject: [PATCH] Add space allocation component

---
 .../SpaceAllocation/SpaceAllocation.tsx       | 40 +++++++++++++
 .../SpaceAllocation/spaceAllocation.css       | 58 +++++++++++++++++++
 stories/SpaceAllocation.stories.ts            | 37 ++++++++++++
 3 files changed, 135 insertions(+)
 create mode 100644 components/SpaceAllocation/SpaceAllocation.tsx
 create mode 100644 components/SpaceAllocation/spaceAllocation.css
 create mode 100644 stories/SpaceAllocation.stories.ts

diff --git a/components/SpaceAllocation/SpaceAllocation.tsx b/components/SpaceAllocation/SpaceAllocation.tsx
new file mode 100644
index 0000000..f31e1dd
--- /dev/null
+++ b/components/SpaceAllocation/SpaceAllocation.tsx
@@ -0,0 +1,40 @@
+import { PrettyBytes } from "../../utils/bytes";
+import "./spaceAllocation.css";
+import React from "react";
+
+type Props = {
+  data: {
+    title: string;
+    percent: number;
+    size: number;
+  }[];
+};
+
+export function SpaceAllocation({ data }: Props) {
+  return (
+    <>
+      <div className="nodeSpaceAllocation-bar">
+        {data.map((d, index) => (
+          <span
+            className={`nodeSpaceAllocation-barItem nodeSpaceAllocation-barQuota nodeSpaceAllocation-quota-${index}`}
+            style={{ width: d.percent + "%" }}
+          ></span>
+        ))}
+      </div>
+
+      <div className="nodeSpaceAllocation-legend">
+        {data.map((d, index) => (
+          <div className="nodeSpaceAllocation-legendRow">
+            <div className="nodeSpaceAllocation-legendLeft">
+              <div
+                className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
+              ></div>
+              <span>{d.title}</span>
+            </div>
+            <small>{PrettyBytes(d.size)}</small>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/components/SpaceAllocation/spaceAllocation.css b/components/SpaceAllocation/spaceAllocation.css
new file mode 100644
index 0000000..6c94b0a
--- /dev/null
+++ b/components/SpaceAllocation/spaceAllocation.css
@@ -0,0 +1,58 @@
+.nodeSpaceAllocation-bar {
+  height: 10px;
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.nodeSpaceAllocation-barQuota {
+  width: 10%;
+}
+
+.nodeSpaceAllocation-barItem {
+  display: inline-block;
+  height: 100%;
+  border-radius: var(--codex-border-radius);
+}
+
+.nodeSpaceAllocation-barQuota-used {
+  border-top-left-radius: var(--codex-border-radius);
+  border-bottom-left-radius: var(--codex-border-radius);
+  border-radius: var(--codex-border-radius);
+}
+
+.nodeSpaceAllocation-quota-0 {
+  background-color: var(--codex-color);
+}
+
+.nodeSpaceAllocation-quota-1 {
+  background-color: var(--codex-color-primary);
+}
+
+.nodeSpaceAllocation-quota-2 {
+  background-color: #f9fa93;
+}
+
+.nodeSpaceAllocation-legend {
+  margin-top: 0.75rem;
+}
+
+.nodeSpaceAllocation-legendItem {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--codex-border-radius);
+}
+
+.nodeSpaceAllocation-legendRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  gap: 0.75rem;
+}
+
+.nodeSpaceAllocation-legendLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
diff --git a/stories/SpaceAllocation.stories.ts b/stories/SpaceAllocation.stories.ts
new file mode 100644
index 0000000..4903c98
--- /dev/null
+++ b/stories/SpaceAllocation.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SpaceAllocation } from "../components/SpaceAllocation/SpaceAllocation";
+
+const meta = {
+  title: "Advanced/SpaceAllocation",
+  component: SpaceAllocation,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof SpaceAllocation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      {
+        title: "Maximum storage space used by the node",
+        percent: 60,
+        size: 10000000,
+      },
+      {
+        title: "Amount of storage space currently in use",
+        percent: 20,
+        size: 10000000 * 0.2,
+      },
+      {
+        title: "Amount of storage space reserved",
+        percent: 20,
+        size: 10000000 * 0.2,
+      },
+    ],
+  },
+};