From 6309359770768ed76e2cbe7a2f4e9bc745254103 Mon Sep 17 00:00:00 2001
From: Hannah Park <hannahp056@gmail.com>
Date: Sun, 9 Jan 2022 21:58:34 -0500
Subject: [PATCH] edit win modal

---
 src/App.tsx                                   |  1 +
 src/components/mini-grid/MiniCell.tsx         | 23 +++++++++++++++++++
 src/components/mini-grid/MiniCompletedRow.tsx | 18 +++++++++++++++
 src/components/mini-grid/MiniGrid.tsx         | 15 ++++++++++++
 src/components/win-modal/WinModal.tsx         | 14 +++++------
 5 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 src/components/mini-grid/MiniCell.tsx
 create mode 100644 src/components/mini-grid/MiniCompletedRow.tsx
 create mode 100644 src/components/mini-grid/MiniGrid.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b426548..4e9a429 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -73,6 +73,7 @@ function App() {
       <WinModal
         isOpen={isWinModalOpen}
         handleClose={() => setIsWinModalOpen(false)}
+        guesses={guesses}
       />
     </div>
   );
diff --git a/src/components/mini-grid/MiniCell.tsx b/src/components/mini-grid/MiniCell.tsx
new file mode 100644
index 0000000..7471f99
--- /dev/null
+++ b/src/components/mini-grid/MiniCell.tsx
@@ -0,0 +1,23 @@
+import { CharStatus } from "../../lib/statuses";
+import classnames from "classnames";
+
+type Props = {
+  status: CharStatus;
+};
+
+export const MiniCell = ({ status }: Props) => {
+  const classes = classnames(
+    "w-10 h-10 border-solid border-2 border-slate-200 flex items-center justify-center mx-0.5 text-lg font-bold rounded",
+    {
+      "bg-white": status === "absent",
+      "bg-green-500": status === "correct",
+      "bg-yellow-500": status === "present",
+    }
+  );
+
+  return (
+    <>
+      <div className={classes}></div>
+    </>
+  );
+};
diff --git a/src/components/mini-grid/MiniCompletedRow.tsx b/src/components/mini-grid/MiniCompletedRow.tsx
new file mode 100644
index 0000000..d4b0b8f
--- /dev/null
+++ b/src/components/mini-grid/MiniCompletedRow.tsx
@@ -0,0 +1,18 @@
+import { getGuessStatuses } from "../../lib/statuses";
+import { MiniCell } from "./MiniCell";
+
+type Props = {
+  guess: string;
+};
+
+export const MiniCompletedRow = ({ guess }: Props) => {
+  const statuses = getGuessStatuses(guess);
+
+  return (
+    <div className="flex justify-center mb-1">
+      {guess.split("").map((letter, i) => (
+        <MiniCell key={i} status={statuses[i]} />
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/mini-grid/MiniGrid.tsx b/src/components/mini-grid/MiniGrid.tsx
new file mode 100644
index 0000000..097b88c
--- /dev/null
+++ b/src/components/mini-grid/MiniGrid.tsx
@@ -0,0 +1,15 @@
+import { MiniCompletedRow } from "./MiniCompletedRow";
+
+type Props = {
+  guesses: string[];
+};
+
+export const MiniGrid = ({ guesses }: Props) => {
+  return (
+    <div className="pb-6">
+      {guesses.map((guess, i) => (
+        <MiniCompletedRow key={i} guess={guess} />
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/win-modal/WinModal.tsx b/src/components/win-modal/WinModal.tsx
index 29e86a1..70765b9 100644
--- a/src/components/win-modal/WinModal.tsx
+++ b/src/components/win-modal/WinModal.tsx
@@ -1,13 +1,15 @@
 import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { CheckIcon } from "@heroicons/react/outline";
+import { MiniGrid } from "../mini-grid/MiniGrid";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
+  guesses: string[];
 };
 
-export const WinModal = ({ isOpen, handleClose }: Props) => {
+export const WinModal = ({ isOpen, handleClose, guesses }: Props) => {
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog
@@ -57,13 +59,11 @@ export const WinModal = ({ isOpen, handleClose }: Props) => {
                     as="h3"
                     className="text-lg leading-6 font-medium text-gray-900"
                   >
-                    Payment successful
+                    You won!
                   </Dialog.Title>
                   <div className="mt-2">
-                    <p className="text-sm text-gray-500">
-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                      Consequatur amet labore.
-                    </p>
+                    <MiniGrid guesses={guesses}/>
+                    <p className="text-sm text-gray-500">Great job.</p>
                   </div>
                 </div>
               </div>
@@ -73,7 +73,7 @@ export const WinModal = ({ isOpen, handleClose }: Props) => {
                   className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
                   onClick={handleClose}
                 >
-                  Go back to dashboard
+                  Exit
                 </button>
               </div>
             </div>