wip

my-app/src/App.tsx

@@ -1,9 +1,16 @@
 import './App.css';
-import Counters from './Components/Counters';
+import Counters from './Components/Counters/Counters';
+import styled from 'styled-components';
+
+const MainWrapper = styled.div`
+`;
+
 
 function App() {
   return (
+    <MainWrapper>
       <Counters/>
+    </MainWrapper>
   );
 }
 

my-app/src/Components/Counters.tsx

@@ -1,25 +0,0 @@
-import * as S from "./Componets.style";
-
-
-const Counters = () => {
-  return (
-    <S.CountersWrapper>
-        <S.CountersGrid>
-            <S.GridItem>
-                hej1
-            </S.GridItem>
-            <S.GridItem>
-                hej2
-            </S.GridItem>
-            <S.GridItem>
-                hej3
-            </S.GridItem>
-            <S.GridItem>
-                hej4
-            </S.GridItem>
-        </S.CountersGrid>
-    </S.CountersWrapper>
-  );
-}
-
-export default Counters;

my-app/src/Components/Counters/Counters.style.ts

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const CountersWrapper = styled.div`
   width: 100vw;
   height: 100vh;
-  background-color: black;
+  background-color:   #4f4f4f;
 `;
 
 export const CountersGrid = styled.div`
@@ -11,16 +11,16 @@ export const CountersGrid = styled.div`
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  background-color: red;
   border-radius: 10px;
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+  box-sizing: border-box;         /* Opera/IE 8+ */
 `;
 
-export const GridItem = styled.div`
+export const GridItemContainer = styled.div`
   display: flex;
   width: 50%;
   height: 50vh;
   justify-content: center;
   align-items: center;
-  background-color: antiquewhite;
-  border-radius: 10px;
 `;

my-app/src/Components/Counters/Counters.tsx

@@ -0,0 +1,26 @@
+import * as S from "./Counters.style";
+import LifeCounter from "../LifeCounter/LifeCounter";
+
+
+const Counters = () => {
+  return (
+    <S.CountersWrapper>
+        <S.CountersGrid>
+            <S.GridItemContainer>
+                <LifeCounter backgroundColor="grey"/>
+            </S.GridItemContainer>
+            <S.GridItemContainer>
+                <LifeCounter backgroundColor="pink"/>
+            </S.GridItemContainer>
+            <S.GridItemContainer>
+                <LifeCounter backgroundColor="white"/>
+            </S.GridItemContainer>
+            <S.GridItemContainer>
+                <LifeCounter backgroundColor="lightblue"/>
+            </S.GridItemContainer>
+        </S.CountersGrid>
+    </S.CountersWrapper>
+  );
+}
+
+export default Counters;

my-app/src/Components/LifeCounter/LifeCounter.style.ts

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+
+//LifeCounterWrapper with a background color variable:
+export const LifeCounterWrapper = styled.div<{ backgroundColor?: string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.backgroundColor || "antiquewhite"};
+  border-radius: 10px;
+
+`;
+
+export const LifeCounterButton = styled.button`
+  width: 100%;
+  height: 100%;
+  font-size: 5rem;
+  font-weight: bold;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+`;
+
+export const LifeCounterText = styled.p`
+  font-size: 5rem;
+  font-weight: bold;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+
+`;
+
+
+

my-app/src/Components/LifeCounter/LifeCounter.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import * as S from "./LifeCounter.style";
+
+type LifeCounterProps = {
+    backgroundColor: string;
+}
+
+const LifeCounter = ({backgroundColor}: LifeCounterProps)  => {
+    const [life, setLife] = useState(40);
+
+    return (
+        <S.LifeCounterWrapper backgroundColor={backgroundColor}>
+            <S.LifeCounterButton onClick={() => setLife(life - 1)}>-</S.LifeCounterButton>
+            <S.LifeCounterText>{life}</S.LifeCounterText>
+            <S.LifeCounterButton onClick={() => setLife(life + 1)}>+</S.LifeCounterButton>
+        </S.LifeCounterWrapper>
+    );
+}
+
+export default LifeCounter;