Introducing VerticalBar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/VerticalBar/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./vertical-bar";

src/renderer/components/VerticalBar/vertical-bar.module.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.verticalBar {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 12px;
+  height: 22px;
+  background-color: #313235;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.value {
+  background-color: gray;
+  transition: all 0.2s ease-in-out;
+}

src/renderer/components/VerticalBar/vertical-bar.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./vertical-bar.module.scss";
+
+import React, { HTMLAttributes } from "react";
+import { cssNames } from "../../utils";
+
+interface BarProps extends HTMLAttributes<HTMLDivElement> {
+  color: string;
+  value: number;
+}
+
+export function VerticalBar({ color, className, value }: BarProps) {
+  return (
+    <div className={styles.verticalBar}>
+      <div className={cssNames(styles.value, className)} style={{ backgroundColor: color, height: `${value}%` }}></div>
+    </div>
+  );
+}