SHARE
TWEET

Untitled

a guest Jun 28th, 2019 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import styled from '@emotion/styled';
  3.  
  4. const MIN_PERCENTAGE = 2;
  5.  
  6. const Container = styled.div`
  7.   height: 10vh;
  8.   display: flex;
  9.   flex-direction: row;
  10.   align-items: center;
  11.   position: relative;
  12.   background-color: #${props => props.backgroundColor};
  13. `;
  14.  
  15. const Progress = styled.div`
  16.   z-index: 90;
  17.   position: absolute;
  18.   top: 0;
  19.   bottom: 0;
  20.   background-color: ${props => `#${props.backgroundColor}`};
  21.   width: ${props => props.width}%;
  22. `;
  23.  
  24. const Name = styled.div`
  25.   z-index: 100;
  26.   color: #fff;
  27.   margin-left: 2.5vw;
  28.   font-size: 5.5vh;
  29.   font-family: 'DIN Next LT Pro Bold Condensed';
  30.   font-weight: bold;
  31.   text-transform: uppercase;
  32.   position: relative;
  33.   bottom: -.5vh;
  34.   flex: 1;
  35. `;
  36.  
  37. const Emoji = styled.div`
  38.   display: flex;
  39.   flex-direction: row;
  40.   margin-right: 2vw;
  41.   align-items: center;
  42. `;
  43.  
  44. const Image = styled.div`
  45.   width: 25px;
  46.   height: 25px;
  47.   margin-right: 1vw;
  48. `;
  49.  
  50. const Shortcut = styled.div`
  51.   font-family: 'DIN Next LT Pro Bold Condensed';
  52.   font-weight: bold;
  53.   font-size: 4.5vh;
  54.   color: #fff;
  55. `;
  56.  
  57. export default class ProgressBar extends Component {
  58.   render() {
  59.     const { colors, emoji, name, value } = this.props;
  60.     const { shortcut } = emoji;
  61.  
  62.     let progressPercentage = value / 1000000 * 100;
  63.     if (progressPercentage < MIN_PERCENTAGE) progressPercentage = MIN_PERCENTAGE;
  64.  
  65.     return (
  66.       <Container backgroundColor={colors.dark}>
  67.         <Progress
  68.           backgroundColor={colors.primary}
  69.           width={progressPercentage} />
  70.         <Name>{name}</Name>
  71.         <Emoji>
  72.           <Image>
  73.             <img src={emoji.imageUrl} alt="" />
  74.           </Image>
  75.           <Shortcut>:{shortcut}:</Shortcut>
  76.         </Emoji>
  77.       </Container>
  78.     )
  79.   }
  80. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top