edit win modal
This commit is contained in:
parent
e321441f96
commit
6309359770
5 changed files with 64 additions and 7 deletions
|
@ -73,6 +73,7 @@ function App() {
|
||||||
<WinModal
|
<WinModal
|
||||||
isOpen={isWinModalOpen}
|
isOpen={isWinModalOpen}
|
||||||
handleClose={() => setIsWinModalOpen(false)}
|
handleClose={() => setIsWinModalOpen(false)}
|
||||||
|
guesses={guesses}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
23
src/components/mini-grid/MiniCell.tsx
Normal file
23
src/components/mini-grid/MiniCell.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
18
src/components/mini-grid/MiniCompletedRow.tsx
Normal file
18
src/components/mini-grid/MiniCompletedRow.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
15
src/components/mini-grid/MiniGrid.tsx
Normal file
15
src/components/mini-grid/MiniGrid.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,13 +1,15 @@
|
||||||
import { Fragment, useState } from "react";
|
import { Fragment, useState } from "react";
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
import { CheckIcon } from "@heroicons/react/outline";
|
import { CheckIcon } from "@heroicons/react/outline";
|
||||||
|
import { MiniGrid } from "../mini-grid/MiniGrid";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
handleClose: () => void;
|
handleClose: () => void;
|
||||||
|
guesses: string[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export const WinModal = ({ isOpen, handleClose }: Props) => {
|
export const WinModal = ({ isOpen, handleClose, guesses }: Props) => {
|
||||||
return (
|
return (
|
||||||
<Transition.Root show={isOpen} as={Fragment}>
|
<Transition.Root show={isOpen} as={Fragment}>
|
||||||
<Dialog
|
<Dialog
|
||||||
|
@ -57,13 +59,11 @@ export const WinModal = ({ isOpen, handleClose }: Props) => {
|
||||||
as="h3"
|
as="h3"
|
||||||
className="text-lg leading-6 font-medium text-gray-900"
|
className="text-lg leading-6 font-medium text-gray-900"
|
||||||
>
|
>
|
||||||
Payment successful
|
You won!
|
||||||
</Dialog.Title>
|
</Dialog.Title>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<p className="text-sm text-gray-500">
|
<MiniGrid guesses={guesses}/>
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
<p className="text-sm text-gray-500">Great job.</p>
|
||||||
Consequatur amet labore.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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"
|
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}
|
onClick={handleClose}
|
||||||
>
|
>
|
||||||
Go back to dashboard
|
Exit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Reference in a new issue