edit win modal

src/App.tsx

@@ -73,6 +73,7 @@ function App() {
       <WinModal
         isOpen={isWinModalOpen}
         handleClose={() => setIsWinModalOpen(false)}
+        guesses={guesses}
       />
     </div>
   );

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>
+    </>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>