import './styles.sass';

const StatusItem = (props) => (
    <div className="status-item">
        <div className="status-title">
            <h2>{props.service}</h2>
            <hr/>
        </div>
        <div className="shards">
            {props.shards.map(shard => <div key={shard.service} className={"shard " + (shard.status === "inactive" ? "shard-inactive" : "")}>{shard.name}</div>)}
        </div>
    </div>
)

export default StatusItem;