From 6309359770768ed76e2cbe7a2f4e9bc745254103 Mon Sep 17 00:00:00 2001 From: Hannah Park 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() { setIsWinModalOpen(false)} + guesses={guesses} /> ); 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 ( + <> +
+ + ); +}; 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 ( +
+ {guess.split("").map((letter, i) => ( + + ))} +
+ ); +}; 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 ( +
+ {guesses.map((guess, i) => ( + + ))} +
+ ); +}; 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 ( { as="h3" className="text-lg leading-6 font-medium text-gray-900" > - Payment successful + You won!
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequatur amet labore. -

+ +

Great job.

@@ -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