InfoModal.tsx

import {ModalInstanceProps} from '../../types';
import {Cell} from '../grid/Cell';
import {BaseModal} from './BaseModal';

export const InfoModal: React.FC<ModalInstanceProps> = props => (
  <BaseModal title='How to play' {...props}>
    <p className='text-sm text-gray-500 dark:text-gray-300'>
      Guess the word in 6 tries. After each guess, the color of the tiles will change to show how
      close your guess was to the word.
    </p>

    <div className='flex justify-center mb-1 mt-4'>
      <Cell isRevealing isCompleted value='W' status='correct' />
      <Cell value='E' />
      <Cell value='A' />
      <Cell value='R' />
      <Cell value='Y' />
    </div>
    <p className='text-sm text-gray-500 dark:text-gray-300'>
      The letter W is in the word and in the correct spot.
    </p>

    <div className='flex justify-center mb-1 mt-4'>
      <Cell value='P' />
      <Cell value='I' />
      <Cell isRevealing isCompleted value='L' status='present' />
      <Cell value='O' />
      <Cell value='T' />
    </div>
    <p className='text-sm text-gray-500 dark:text-gray-300'>
      The letter L is in the word but in the wrong spot.
    </p>

    <div className='flex justify-center mb-1 mt-4'>
      <Cell value='V' />
      <Cell value='A' />
      <Cell value='G' />
      <Cell isRevealing isCompleted value='U' status='absent' />
      <Cell value='E' />
    </div>
    <p className='text-sm text-gray-500 dark:text-gray-300'>
      The letter U is not in the word in any spot.
    </p>

    <p className='mt-6 italic text-sm text-gray-500 dark:text-gray-300'>
      This is an open source version of the word guessing game we all know and love -{' '}
      <a href='https://github.com/cwackerfuss/react-wordle' className='underline font-bold'>
        check out the code here
      </a>{' '}
    </p>
  </BaseModal>
);