diff --git a/src/components/SearchResultsSection.tsx b/src/components/SearchResultsSection.tsx index 26a3d8d..f769b5c 100644 --- a/src/components/SearchResultsSection.tsx +++ b/src/components/SearchResultsSection.tsx @@ -36,7 +36,7 @@ export const SearchResultSection = () => { {t("searchResults.title")} </Typography> <Typography className="text-gray-300 text-sm"> - {t("searchResults.totalResults")}: {searchResults?.meta.total} + {t("searchResults.totalResults")}: {searchResults?.meta.total} </Typography> </div> <hr className="w-full border-gray-100" /> diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx index 9fbd384..a34dc4d 100755 --- a/src/components/parts/Header.tsx +++ b/src/components/parts/Header.tsx @@ -5,7 +5,6 @@ import { useState, useTransition } from "react"; /* -------------------------------------------------------------------------- */ import ContextMenuAction from "../drop-down-menu/ContextMenuAction"; import ContextMenu from "../drop-down-menu/ContextMenu"; -import LogoScipaper from "../LogoScipaper"; import { Button } from "../Button/Button"; import Avatar from "../Avatar"; import Navbar from "../Navbar"; @@ -25,6 +24,9 @@ import { } from "components/icons"; import i18n from "localization/i18n"; import { useTranslation } from "react-i18next"; +import Link from "components/typography/Link"; +import LocalizationButton from "components/LocalizationButton"; +import LogoScipaper from "components/LogoScipaper"; const Header = () => { const [authenticated, setAuthenticated] = useState(false); @@ -47,16 +49,16 @@ const Header = () => { xl:gap-60 xl:px-16" > {/* Logo and Menu */} - <div className="flex gap-8 xl:gap-x-16 items-center"> + <div className="flex gap-8 xl:gap-x-16"> {/* Logo - start - className="w-7 sm:w-10 " /> */} - <a className="Logo flex items-center gap-1 sm:gap-2 " href="/"> + <Link className="Logo flex items-center gap-1 sm:gap-2 " to="/"> <Logo - className={classNames(authenticated ? "w-10" : "w-7 sm:w-10" )} + className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")} /> <LogoScipaper className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")} /> - </a> + </Link> {/* Logo - end - */} {/* Menu( Create new - My library - About ) Start */} @@ -69,36 +71,36 @@ const Header = () => { className="text-blue-500 px-4 font-bold uppercase" to="/create-new" > - {t('navbar.createNew')} + {t("navbar.createNew")} </RouterLink> {/* Link Create now - end - */} {/* Dropdown Menu My library - start - */} <ContextMenu emphasis="high" - button={t('navbar.library.navTitle')} + button={t("navbar.library.navTitle")} className="border-none uppercase" > <ContextMenuAction - caption={t('navbar.library.publications')} + caption={t("navbar.library.publications")} action={() => console.log("My publications")} icon={<SVGFile className="stroke-black " />} ></ContextMenuAction> <ContextMenuAction - caption={t('navbar.library.favorites')} + caption={t("navbar.library.favorites")} action={() => console.log("My Favorites")} icon={<SVGFavoriteOutlined className="stroke-black" />} ></ContextMenuAction> <ContextMenuAction - caption={t('navbar.library.collections')} + caption={t("navbar.library.collections")} action={() => console.log("My Collections")} icon={<SVGFolder className="stroke-black fill-black" />} ></ContextMenuAction> <ContextMenuAction - caption={t('navbar.library.recentViewed')} + caption={t("navbar.library.recentViewed")} action={() => console.log("Recent Viewed")} icon={<SVGEye className="stroke-black " />} ></ContextMenuAction> @@ -108,21 +110,21 @@ const Header = () => { {/* Dropdown Menu About - start - */} <ContextMenu emphasis="high" - button={t('navbar.about.navTitle')} + button={t("navbar.about.navTitle")} className="border-none uppercase" > <ContextMenuAction - caption={t('navbar.about.aboutProject')} + caption={t("navbar.about.aboutProject")} action={() => console.log("About Freeland")} ></ContextMenuAction> <ContextMenuAction - caption={t('navbar.about.contacts')} + caption={t("navbar.about.contacts")} action={() => console.log("Contact Us")} ></ContextMenuAction> <ContextMenuAction - caption={t('navbar.about.help')} + caption={t("navbar.about.help")} action={() => console.log("Help")} ></ContextMenuAction> </ContextMenu> @@ -135,19 +137,22 @@ const Header = () => { <div className="flex items-center font-bold text-sm gap-1 md:gap-2 "> {!authenticated ? [ - <Button - emphasis="low" - onClick={onClick} - className="text-xs sm:px-4 sm:text-sm " - > - {t('navbar.auth.signIn')} - </Button>, + <> + <LocalizationButton className="hidden md:flex" /> + <Button + emphasis="low" + onClick={onClick} + className="text-xs sm:px-4 sm:text-sm " + > + {t("navbar.auth.signIn")} + </Button> + </>, <Button emphasis="medium" className="hidden md:flex" onClick={onClick} > - {t('navbar.auth.signUp')} + {t("navbar.auth.signUp")} </Button>, ] : [