diff --git a/src/components/modals/AboutModal.tsx b/src/components/modals/AboutModal.tsx index 025c09e..7934c52 100644 --- a/src/components/modals/AboutModal.tsx +++ b/src/components/modals/AboutModal.tsx @@ -1,6 +1,4 @@ -import { Fragment } from 'react' -import { Dialog, Transition } from '@headlessui/react' -import { XCircleIcon } from '@heroicons/react/outline' +import { BaseModal } from './BaseModal' type Props = { isOpen: boolean @@ -9,80 +7,23 @@ type Props = { export const AboutModal = ({ isOpen, handleClose }: Props) => { return ( - - -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - - -
-
- handleClose()} - /> -
-
-
- - About - -
-

- This is an open source clone of the game Wordle -{' '} - - check out the code here - {' '} - and{' '} - - play the original here - -

-
-
-
-
-
-
-
-
+ +

+ This is an open source clone of the game Wordle -{' '} + + check out the code here + {' '} + and{' '} + + play the original here + +

+
) } diff --git a/src/components/modals/BaseModal.tsx b/src/components/modals/BaseModal.tsx new file mode 100644 index 0000000..e07a1e3 --- /dev/null +++ b/src/components/modals/BaseModal.tsx @@ -0,0 +1,75 @@ +import { Fragment } from 'react' +import { Dialog, Transition } from '@headlessui/react' +import { XCircleIcon } from '@heroicons/react/outline' + +type Props = { + title: string + children: React.ReactNode + isOpen: boolean + handleClose: () => void +} + +export const BaseModal = ({ title, children, isOpen, handleClose }: Props) => { + return ( + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+ handleClose()} + /> +
+
+
+ + {title} + +
+ {children} +
+
+
+
+
+
+
+
+ ) +} diff --git a/src/components/modals/InfoModal.tsx b/src/components/modals/InfoModal.tsx index 37472d0..3fc0f32 100644 --- a/src/components/modals/InfoModal.tsx +++ b/src/components/modals/InfoModal.tsx @@ -1,7 +1,5 @@ -import { Fragment } from 'react' -import { Dialog, Transition } from '@headlessui/react' import { Cell } from '../grid/Cell' -import { XCircleIcon } from '@heroicons/react/outline' +import { BaseModal } from './BaseModal' type Props = { isOpen: boolean @@ -10,102 +8,44 @@ type Props = { export const InfoModal = ({ isOpen, handleClose }: Props) => { return ( - - -
- - - + +

+ Guess the WORDLE in 6 tries. After each guess, the color of the tiles + will change to show how close your guess was to the word. +

- {/* This element is to trick the browser into centering the modal contents. */} - - -
-
- handleClose()} - /> -
-
-
- - How to play - -
-

- Guess the WORDLE in 6 tries. After each guess, the color - of the tiles will change to show how close your guess was - to the word. -

+
+ + + + + +
+

+ The letter W is in the word and in the correct spot. +

-
- - - - - -
-

- The letter W is in the word and in the correct spot. -

+
+ + + + + +
+

+ The letter L is in the word but in the wrong spot. +

-
- - - - - -
-

- The letter L is in the word but in the wrong spot. -

- -
- - - - - -
-

- The letter U is not in the word in any spot. -

-
-
-
-
-
-
-
-
+
+ + + + + +
+

+ The letter U is not in the word in any spot. +

+ ) } diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx index a2e08a2..4b0ad02 100644 --- a/src/components/modals/StatsModal.tsx +++ b/src/components/modals/StatsModal.tsx @@ -1,9 +1,7 @@ -import { Fragment } from 'react' -import { Dialog, Transition } from '@headlessui/react' -import { XCircleIcon } from '@heroicons/react/outline' import { StatBar } from '../stats/StatBar' import { Histogram } from '../stats/Histogram' import { GameStats } from '../../lib/localStorage' +import { BaseModal } from './BaseModal' type Props = { isOpen: boolean @@ -13,71 +11,12 @@ type Props = { export const StatsModal = ({ isOpen, handleClose, gameStats }: Props) => { return ( - - -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - - -
-
- -
-
-
- - Statistics - - -

- Guess Distribution -

- -
-
-
-
-
-
-
+ + +

+ Guess Distribution +

+ +
) } diff --git a/src/components/modals/WinModal.tsx b/src/components/modals/WinModal.tsx index faf8254..a0979da 100644 --- a/src/components/modals/WinModal.tsx +++ b/src/components/modals/WinModal.tsx @@ -1,9 +1,8 @@ -import { Fragment } from 'react' -import { Dialog, Transition } from '@headlessui/react' +import { Dialog } from '@headlessui/react' import { CheckIcon } from '@heroicons/react/outline' import { MiniGrid } from '../mini-grid/MiniGrid' import { shareStatus } from '../../lib/share' -import { XCircleIcon } from '@heroicons/react/outline' +import { BaseModal } from './BaseModal' type Props = { isOpen: boolean @@ -19,84 +18,36 @@ export const WinModal = ({ handleShare, }: Props) => { return ( - - -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - - -
-
- handleClose()} - /> -
-
-
-
-
- - You won! - -
- -

Great job.

-
-
-
-
- -
-
-
+ +
+
+
-
-
+
+ + You won! + +
+ +

Great job.

+
+
+ +
+ +
+ ) }