StatusBar added

src/components/Main/index.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import db from "../../../db.json";
 import { motion } from "framer-motion";
 import { useRouter } from "next/router";
+import StatsBar from "../StatsBar";
 
 const Main = styled.div`
  justify-content: space-between;
@@ -176,6 +177,7 @@ export function MainComplete() {
  />
  </Main.MiniCard>
  </Main.BlockMiniCard>
+ <StatsBar />
  </Main.PlayerArea>
  <Main.Ranking
  as={motion.div}

src/components/StatsBar/index.js

@@ -0,0 +1,75 @@
+import React from "react";
+import styled from "styled-components";
+import db from "../../../db.json";
+const Container = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ height: 20%;
+ justify-content: space-around;
+ align-items: center;
+`;
+
+const Bar = styled.div`
+ position: relative;
+ width: 40%;
+ height: 10%;
+ border-radius: 50px;
+ background-color: #4c596d;
+`;
+
+const Desc = styled.label`
+ position: absolute;
+ top: -260%;
+`;
+
+export default function StatsBar() {
+ return (
+ <Container>
+ <Bar>
+ <div
+ style={{
+ backgroundColor: `${db.theme.colors.red}`,
+ height: "100%",
+ borderRadius: "50px",
+ width: "70%",
+ }}
+ />
+ <Desc>Força</Desc>
+ </Bar>
+ <Bar>
+ <div
+ style={{
+ backgroundColor: `${db.theme.colors.blue}`,
+ height: "100%",
+ borderRadius: "50px",
+ width: "25%",
+ }}
+ />
+ <Desc>Magia</Desc>
+ </Bar>
+ <Bar>
+ <div
+ style={{
+ backgroundColor: `${db.theme.colors.yellow}`,
+ height: "100%",
+ borderRadius: "50px",
+ width: "50%",
+ }}
+ />
+ <Desc>Percepção</Desc>
+ </Bar>
+ <Bar>
+ <div
+ style={{
+ backgroundColor: `${db.theme.colors.green}`,
+ height: "100%",
+ borderRadius: "50px",
+ width: "78%",
+ }}
+ />
+ <Desc>Agilidade</Desc>
+ </Bar>
+ </Container>
+ );
+}