update to apply best practices in programming

src/HangmanWord.tsx

@@ -1,41 +1,56 @@
+import React from 'react';
+
 type HangmanWordProps = {
-  guessedLetters: string[]
-  wordToGuess: string
-  reveal?: boolean
-}
+  guessedLetters: string[];
+  wordToGuess: string;
+  reveal?: boolean;
+};
+
+const renderLetter = (
+  letter: string,
+  index: number,
+  guessedLetters: string[],
+  reveal: boolean
+) => {
+  const isGuessed = guessedLetters.includes(letter);
+  const isHidden = !isGuessed && reveal;
+  const textColor = isHidden ? 'red' : 'black';
+
+  return (
+    <span
+      key={index}
+      style={{
+        borderBottom: '.1em solid black',
+        visibility: isHidden ? 'visible' : 'hidden',
+        color: textColor,
+      }}
+    >
+      {letter}
+    </span>
+  );
+};
 
-export function HangmanWord({
+const HangmanWord: React.FC<HangmanWordProps> = ({
   guessedLetters,
   wordToGuess,
   reveal = false,
-}: HangmanWordProps) {
+}) => {
   return (
     <div
       style={{
-        display: "flex",
-        gap: ".25em",
-        fontSize: "6rem",
-        fontWeight: "bold",
-        textTransform: "uppercase",
-        fontFamily: "monospace",
+        display: 'flex',
+        gap: '.25em',
+        fontSize: '6rem',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        fontFamily: 'monospace',
       }}
     >
-      {wordToGuess.split("").map((letter, index) => (
-        <span style={{ borderBottom: ".1em solid black" }} key={index}>
-          <span
-            style={{
-              visibility:
-                guessedLetters.includes(letter) || reveal
-                  ? "visible"
-                  : "hidden",
-              color:
-                !guessedLetters.includes(letter) && reveal ? "red" : "black",
-            }}
-          >
-            {letter}
-          </span>
-        </span>
-      ))}
+      {wordToGuess.split('').map((letter, index) =>
+        renderLetter(letter, index, guessedLetters, reveal)
+      )}
     </div>
-  )
-}
+  );
+};
+
+export default HangmanWord;

src/Keyboard.tsx

@@ -1,71 +1,51 @@
-import styles from "./Keyboard.module.css"
+import React from 'react';
+import styles from './Keyboard.module.css';
 
-const KEYS = [
-  "a",
-  "b",
-  "c",
-  "d",
-  "e",
-  "f",
-  "g",
-  "h",
-  "i",
-  "j",
-  "k",
-  "l",
-  "m",
-  "n",
-  "o",
-  "p",
-  "q",
-  "r",
-  "s",
-  "t",
-  "u",
-  "v",
-  "w",
-  "x",
-  "y",
-  "z",
-]
+const KEYS = Array.from('abcdefghijklmnopqrstuvwxyz');
 
 type KeyboardProps = {
-  disabled?: boolean
-  activeLetters: string[]
-  inactiveLetters: string[]
-  addGuessedLetter: (letter: string) => void
-}
+  disabled?: boolean;
+  activeLetters: string[];
+  inactiveLetters: string[];
+  addGuessedLetter: (letter: string) => void;
+};
 
-export function Keyboard({
+const Keyboard: React.FC<KeyboardProps> = ({
   activeLetters,
   inactiveLetters,
   addGuessedLetter,
   disabled = false,
-}: KeyboardProps) {
+}) => {
   return (
     <div
       style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(75px, 1fr))",
-        gap: ".5rem",
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(75px, 1fr))',
+        gap: '0.5rem',
       }}
     >
-      {KEYS.map(key => {
-        const isActive = activeLetters.includes(key)
-        const isInactive = inactiveLetters.includes(key)
+      {KEYS.map((key) => {
+        const isActive = activeLetters.includes(key);
+        const isInactive = inactiveLetters.includes(key);
+        const buttonClasses = [
+          styles.btn,
+          isActive ? styles.active : '',
+          isInactive ? styles.inactive : '',
+        ].join(' ');
+
         return (
           <button
             onClick={() => addGuessedLetter(key)}
-            className={`${styles.btn} ${isActive ? styles.active : ""} ${
-              isInactive ? styles.inactive : ""
-            }`}
+            className={buttonClasses}
             disabled={isInactive || isActive || disabled}
             key={key}
           >
             {key}
           </button>
-        )
+        );
       })}
     </div>
-  )
-}
+  );
+};
+
+export default Keyboard;