From 6ce9a646dd8979ee092da955086442b1c711b14c Mon Sep 17 00:00:00 2001
From: lilianaEstefanyPachari <lilianapachari21@gmail.com>
Date: Wed, 31 Aug 2022 16:30:49 -0500
Subject: [PATCH 1/2] feat(modules/StudySession): create GameStatus component

---
 .../StudySession/components/GameStatus.tsx    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 modules/StudySession/components/GameStatus.tsx

diff --git a/modules/StudySession/components/GameStatus.tsx b/modules/StudySession/components/GameStatus.tsx
new file mode 100644
index 0000000..947d6c9
--- /dev/null
+++ b/modules/StudySession/components/GameStatus.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { Box, Stack, StackProps, Text } from "@chakra-ui/react";
+
+interface ResultBoxProps {
+  amount: number;
+  type: "correct" | "incorrect";
+}
+interface GameStatusProps extends StackProps {
+  correct: number;
+  incorrect: number;
+  total: number;
+}
+
+const ResultBox: React.FC<ResultBoxProps> = ({ amount, type }) => {
+  const bgColor = type === "correct" ? "status.success" : "status.error";
+  const label = `${amount} ${type === "correct" ? "Correctas" : "Incorrectas"}`;
+  return (
+    <Box bg={bgColor} px={3} py={2} borderRadius="md">
+      <Text>{label}</Text>
+    </Box>
+  );
+};
+
+const GameStatus: React.FC<GameStatusProps> = ({ correct, incorrect, total, ...props }) => {
+  const progressText = `${correct + incorrect}/${total}`;
+  return (
+    <Stack direction="row" justifyContent="space-between" {...props}>
+      <ResultBox amount={correct} type="incorrect" />
+
+      <Box>
+        <Text>{progressText}</Text>
+      </Box>
+
+      <ResultBox amount={incorrect} type="correct" />
+    </Stack>
+  );
+};
+export default GameStatus;

From 1b5ee169a41ac65dfe2b558f0cbe3743b38f61bc Mon Sep 17 00:00:00 2001
From: lilianaEstefanyPachari <lilianapachari21@gmail.com>
Date: Thu, 1 Sep 2022 00:29:00 -0500
Subject: [PATCH 2/2] fix(modules/StudySession/components): try reinstalling
 node modules

---
 modules/StudySession/components/GameStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/StudySession/components/GameStatus.tsx b/modules/StudySession/components/GameStatus.tsx
index 947d6c9..22e080b 100644
--- a/modules/StudySession/components/GameStatus.tsx
+++ b/modules/StudySession/components/GameStatus.tsx
@@ -16,7 +16,7 @@ const ResultBox: React.FC<ResultBoxProps> = ({ amount, type }) => {
   const bgColor = type === "correct" ? "status.success" : "status.error";
   const label = `${amount} ${type === "correct" ? "Correctas" : "Incorrectas"}`;
   return (
-    <Box bg={bgColor} px={3} py={2} borderRadius="md">
+    <Box bgColor={bgColor} px={3} py={2} borderRadius="md">
       <Text>{label}</Text>
     </Box>
   );