hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Introducing VerticalBar

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-04-04 15:00:27 +03:00
parent 85f2ce7504
commit 4fdb46f30c
3 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/VerticalBar/index.ts Normal file
View File

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

20
src/renderer/components/VerticalBar/vertical-bar.module.scss Normal file
View File

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

22
src/renderer/components/VerticalBar/vertical-bar.tsx Normal file
View File

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