React + Tailwindcss + Redux Toolkit

Community feedback

• 

  P

  Thomas TS•1,350

  @ttsoares

  Posted about 1 month ago

  How could be fixed the theme toggler:

  import { BiMoon, BiSun } from "react-icons/bi";
  import { useEffect, useState } from "react";
  
  export default function Header() {
    const [isDark, setIsDark] = useState(false);
  
    useEffect(() => {
      const savedTheme = localStorage.getItem("theme") || "light";
      setIsDark(savedTheme === "dark");
      document.body.classList.add(savedTheme);
    }, []);
  
    const toggleTheme = () => {
      const newTheme = isDark ? "light" : "dark";
      document.body.classList.remove("light", "dark");
      document.body.classList.add(newTheme);
      localStorage.setItem("theme", newTheme);
      setIsDark(!isDark);
    };
  
    return (
      <div className="flex justify-between items-center shadow-md mx-auto px-5 md:px-20 py-8 w-full">
        <h1 className="font-bold text-lg">Where in the world?</h1>
        <button
          className="flex items-center gap-2 shadow-md px-3 py-2 rounded-xl cursor-pointer"
          type="button"
          onClick={toggleTheme}
        >
          {isDark ? <BiSun size={25} /> : <BiMoon size={25} />}
          {isDark ? "Light Mode" : "Dark Mode"}
        </button>
      </div>
    );
  }
  

  00
• 

  P

  Thomas TS•1,350

  @ttsoares

  Posted about 1 month ago

  Nice solution!

  Some comments:

  • The icons "Moon/Sun" are not working 100%. And the label is always "Dark Mode".

  • The 'mobile' version could start at 1023px of window width. In other words: below 1024 change to 'flex-col'.

  • The "Search for a country" feature seems not working.

  • When I solved this challenge used the Jotai package to handle state over componets. Much simpler that Redux: Jotai

  00