monorepo/visions/ui/src/plugins/Candela/DriveGuage/DriveGuage.tsx

import React from 'react';
import './DriveGuage.css';

interface Guage {
    current: number;
    max: number;
}

export const DriveGuage = ({ current, max }: Guage) => {
    let components = [];
    for (let i = 0; i < 9; i++) {
        components.push(<div className="drive-guage__element">
            {i < current ? <div className="drive-guage__top drive-guage__top_filled">&nbsp;</div> :
                <div className="drive-guage__top">&nbsp;</div>}
            {i < max ? <div className="drive-guage__bottom drive-guage__bottom_filled">&nbsp;</div> :
                <div className="drive-guage__bottom">&nbsp;</div>}
        </div>)
    }
    components.splice(3, 0, <div className="drive-guage__spacer">&nbsp;</div>);
    components.splice(7, 0, <div className="drive-guage__spacer">&nbsp;</div>);
    return (<div className="drive-guage">
        {components}
    </div>)
}