Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 6x 6x 6x 42x 42x 6x | /* eslint-disable react/boolean-prop-naming */
import React, {Component} from 'react';
import styled from 'styled-components';
import {ScreenClassContext} from './ScreenClassProvider';
/**
* ScreenBadge
*
* @component
* @augments {Component<Props, State>}
* @extends {Component}
*/
class ScreenBadge extends Component {
static propTypes = {}
static defaultProps = {}
static contextType = ScreenClassContext;
/**
* Renders the Component.
*
* @returns {JSX} Component.
* @memberof ScreenBadge
*/
render() {
const screenClass = this.context;
return <ScreenBadgeElement>{screenClass}</ScreenBadgeElement>;
}
}
export default ScreenBadge;
const ScreenBadgeElement = styled.div`
align-items: center;
background-color: #5901ad40;
border-radius: 5px;
bottom: 10px;
display: flex;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5rem;
font-weight: bold;
height: 30px;
justify-content: center;
position: fixed;
right: 10px;
width: 50px;
z-index: 10;
`; |