import React, { SyntheticEvent, useMemo } from 'react';
        
      // Generate array with all letters of the alphabet
      const ALPHABET = new Array(26)
        .fill('')
        .map((_, index) => String.fromCharCode(65 + index));
        
      type LetterButtonsProps = {
        text?: string;
        usedLetters?: string[];
        onClick?: (letter: string) => void;
      };
        
      function LetterButtons({ onClick, text, usedLetters }: LetterButtonsProps) {
        const handleClick = (e: SyntheticEvent) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const character = (e.target as any).value;
        onClick?.(character);
        };
        
        // Create map objects of letters in `text` and `usedLetters`
        const letters = useMemo(
        () => getLettersMap((text || '').toUpperCase().split('')),
        [text]
        );
        const selectedLetters = useMemo(() => getLettersMap(usedLetters), [
        usedLetters
        ]);
        
        const buttons = ALPHABET.map(letter => (
        <button
          key={letter}
          className={`h-12 w-12 m-1 rounded-md focus:outline-none text-white border${
          selectedLetters[letter] && !letters[letter]
            ? ' bg-red-600 border-red-700 hover:bg-red-700 hover:border-red-800'
            : ' bg-blue-600 border-blue-700 hover:bg-blue-700 hover:border-blue-800'
          }${
          selectedLetters[letter] ? ' opacity-25 cursor-not-allowed' : ''
          }`}
          value={letter}
          onClick={handleClick}
          disabled={!!selectedLetters[letter]}
        >
          {letter}
        </button>
        ));
        
        return <div className="LetterButtons">{buttons}</div>;
      }
        
      export default LetterButtons;
        
      function getLettersMap(letters: string[] = []) {
        return letters.reduce(
        (obj, letter) => ({ ...obj, [letter]: true }),
        {} as { [key: string]: boolean }
        );
      }

      Javascript language logo
      your recipe card header background
      LetterButtons

      FrontendSnippets

      function getLettersMap(letters: string[] = [], usedLetters: string[] = []) { const LETTER_MAP = { ...letters, 'A': [0, 1], 'B': [2, 3], 'C': [4, 5], 'D': [6, 7], 'E': [8, 9], 'F': [10, 11], 'G': [12, 13], 'H': [14, 15], 'I': [16, 17], 'J': [18, 19], 'K': [20, 21], 'L': [22, 23], 'M': [24, 25], 'N': [26, 27], 'O': [28, 29], 'P': [30, 31], 'Q': [32, 33], 'R': [34, 35], 'S': [36, 37], 'T': [38, 39], 'U': [40, 41], 'V

      Shortcut: letters.buttonjsx

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.