Responsive Dictionary Web App

Solution looks cool but a concern about toggling theme. its not actually toggling when you click "toggle-btn-container". Inside that you should explicitly click those two input filed. So for example, if i click "toggle-btn-container" on center of the element then theme wont change. My suggestion is add click event listener to "toggle-btn-container" itself.

Navbar component line 60

  <div className="toggle-btn-container" onClick={()=>setTheme(!theme)}>
            <span className={`${theme && "dark"}`}></span>
            <input
              type="radio"
              name="theme"
              id="theme"
              defaultChecked={!theme}

            />
            <input
              type="radio"
              name="theme"
              id="theme"
              defaultChecked={theme}
            />
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            viewBox="0 0 22 22"
          >
            <path
              fill="none"
              stroke="#838383"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="1.5"
              d="M1 10.449a10.544 10.544 0 0 0 19.993 4.686C11.544 15.135 6.858 10.448 6.858 1A10.545 10.545 0 0 0 1 10.449Z"
            />
          </svg>
        </div>

Make those input fields readonly. And also hoping that change wont cause any bug😅