51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { Cell } from '../grid/Cell'
|
|
import { BaseModal } from './BaseModal'
|
|
|
|
type Props = {
|
|
isOpen: boolean
|
|
handleClose: () => void
|
|
}
|
|
|
|
export const InfoModal = ({ isOpen, handleClose }: Props) => {
|
|
return (
|
|
<BaseModal title="How to play" isOpen={isOpen} handleClose={handleClose}>
|
|
<p className="text-sm text-gray-500 dark:text-gray-300">
|
|
Rate das 🍯le in 6 Versuchen. Nach jedem Versuch ändert sich die Farbe des Kästchens
|
|
um anzuzeigen, wie nah man an der korrekten Lösung ist.
|
|
</p>
|
|
|
|
<div className="flex justify-center mb-1 mt-4">
|
|
<Cell value="I" status="correct" />
|
|
<Cell value="M" />
|
|
<Cell value="K" />
|
|
<Cell value="E" />
|
|
<Cell value="R" />
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-300">
|
|
Der Buchstabe I ist an der korrekten Stelle.
|
|
</p>
|
|
|
|
<div className="flex justify-center mb-1 mt-4">
|
|
<Cell value="B" />
|
|
<Cell value="L" />
|
|
<Cell value="U" status="present" />
|
|
<Cell value="M" />
|
|
<Cell value="E" />
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-300">
|
|
Der Buchstabe U ist in dem Wort enthalten, aber an der falschen Stelle.
|
|
</p>
|
|
|
|
<div className="flex justify-center mb-1 mt-4">
|
|
<Cell value="W" />
|
|
<Cell value="A" />
|
|
<Cell value="B" />
|
|
<Cell value="E" status="absent" />
|
|
<Cell value="N" />
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-300">
|
|
Der Buchstabe E ist nicht in dem Wort enthalten.
|
|
</p>
|
|
</BaseModal>
|
|
)
|
|
}
|