de-bem service comp
This commit is contained in:
parent
f45918a218
commit
9569763e52
2 changed files with 14 additions and 14 deletions
|
@ -1,22 +1,22 @@
|
||||||
.service__header {
|
.service header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service__title__latency {
|
.service header h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service .latency {
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
color: hsl(0, 0%, 45%);
|
color: hsl(0, 0%, 45%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.service__header h2 {
|
.service .emoji {
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service__header__emoji {
|
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service__description {
|
.service .description {
|
||||||
margin: 1em 0 0 0;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,19 +5,19 @@ import './Service.css';
|
||||||
|
|
||||||
const Service = ({ graph, name, status, latency, description }) => (
|
const Service = ({ graph, name, status, latency, description }) => (
|
||||||
<div className="service">
|
<div className="service">
|
||||||
<header className="service__header">
|
<header>
|
||||||
<div className="service__header__emoji">
|
<div className="emoji">
|
||||||
{status ? '✅' : '🚫'}
|
{status ? '✅' : '🚫'}
|
||||||
</div>
|
</div>
|
||||||
<h2 className="service__title">
|
<h2 className="title">
|
||||||
{name} {latency ? (
|
{name} {latency ? (
|
||||||
<span className="service__title__latency">
|
<span className="latency">
|
||||||
{latency}ms
|
{latency}ms
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
</h2>
|
</h2>
|
||||||
</header>
|
</header>
|
||||||
<p className="service__description">
|
<p className="description">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
{graph ? <Graph width={500} height={175} data={graph} /> : null}
|
{graph ? <Graph width={500} height={175} data={graph} /> : null}
|
||||||
|
|
Loading…
Reference in a new issue