edit win modal

This commit is contained in:
Hannah Park 2022-01-09 21:58:34 -05:00
parent e321441f96
commit 6309359770
5 changed files with 64 additions and 7 deletions

View file

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

View file

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

View file

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

View file

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

View file

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