+ {props.guesses.map((guess, index) => {
+ if (props.round === index) {
+ return (
+
+ );
+ }
+ return ;
+ })}
+
+ );
+};
diff --git a/src/components/WordleModal.tsx b/src/components/WordleModal.tsx
new file mode 100644
index 000000000..3a4dc9d16
--- /dev/null
+++ b/src/components/WordleModal.tsx
@@ -0,0 +1,71 @@
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalFooter,
+ ModalBody
+} from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+
+interface WordleModalProps {
+ isOpen: boolean;
+ onOpen: () => void;
+ onClose: () => void;
+ title: string;
+ word: string;
+ round?: number;
+ isCorrect: boolean;
+}
+
+const WordleModal = (props: WordleModalProps) => {
+ return (
+
+ {props.currentGuess.split('').map((letter, index) => {
+ return (
+
+ {letter}
+
+ );
+ })}
+ {[...Array(5 - props.currentGuess.split('').length)].map(
+ (_, index) => {
+ return
;
+ }
+ )}
+
+ );
+ }
+ return (
+