Header - Copy this React, Tailwind Component to your project

import React, { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { useTheme } from "../context/ThemeContext"; import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, Switch, } from "@nextui-org/react"; import { Icon } from "@iconify/react"; import { useLocation } from "@remix-run/react"; const Header: React.FC = () => { const { i18n, t } = useTranslation(); const { theme, toggleTheme } = useTheme(); const [isOpen, setIsOpen] = useState(false); const location = useLocation(); const isLoginPage = location.pathname === "/login"; useEffect(() => { if (isOpen) { const timer = setTimeout(() => setIsOpen(false), 3000); // Đóng sau 3 giây return () => clearTimeout(timer); } }, [isOpen, theme, i18n.language]); if (isLoginPage) return null; const changeLanguage = (lng: string) => { i18n.changeLanguage(lng); }; const handleThemeChange = () => { toggleTheme(); }; return ( <header className="flex justify-between p-4 bg-gray-200 dark:bg-gray-800"> <Dropdown isOpen={isOpen} onOpenChange={setIsOpen}> <DropdownTrigger> <Button isIconOnly> <Icon icon="prime:cog" className="h-6 w-6" /> </Button> </DropdownTrigger> <DropdownMenu aria-label={t("settings")} className="p-3"> <DropdownItem key="language" textValue={t("language")}> <div className="flex items-center justify-between"> <span className="text-sm font-medium">{t("language")}</span> <Switch size="lg" color="primary" startContent={ <Icon icon="twemoji:flag-us" className="text-2xl" /> } endContent={ <Icon icon="twemoji:flag-vietnam" className="text-2xl" /> } isSelected={i18n.language === "vi"} onValueChange={(isVi) => { changeLanguage(isVi ? "vi" : "en"); setIsOpen(true); }} /> </div> </DropdownItem> <DropdownItem key="theme" textValue={t("appearance")}> <div className="flex items-center justify-between"> <span className="text-sm font-medium">{t("appearance")}</span> <Switch size="lg" color="warning" startContent={ <Icon icon="prime:sun" className="text-2xl text-yellow-400" /> } endContent={ <Icon icon="prime:moon" className="text-2xl text-blue-400" /> } isSelected={theme === "dark"} onValueChange={handleThemeChange} /> </div> </DropdownItem> </DropdownMenu> </Dropdown> </header> ); }; export default Header; with my code