diff --git a/next/components/atoms/LanguageSelector.js b/next/components/atoms/LanguageSelector.js index f06925a71..515e9754a 100644 --- a/next/components/atoms/LanguageSelector.js +++ b/next/components/atoms/LanguageSelector.js @@ -1,26 +1,129 @@ -import { Menu, MenuButton, MenuList, MenuItem, Button } from "@chakra-ui/react"; +import { Menu, MenuButton, MenuList, MenuItem, Tooltip } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useTranslation } from "next-i18next"; +import { useState } from "react"; import LanguageIcon from "../../public/img/icons/languageIcon"; export default function LanguageSelector() { const { locale } = useRouter(); const router = useRouter(); + const [showTooltip, setShowTooltip] = useState(false); const changeLanguage = (locale) => { router.push(router.pathname, router.asPath, { locale }); }; + const getTooltipText = () => { + switch(locale) { + case 'pt': + return 'Língua'; + case 'en': + return 'Language'; + case 'es': + return 'Idioma'; + default: + return 'Language'; + } + }; + return ( - - } variant="ghost"> - {locale === 'pt' ? 'PT' : locale === 'en' ? 'EN' : 'ES'} - - - changeLanguage('pt')}>Português - changeLanguage('en')}>English - changeLanguage('es')}>Español - + setShowTooltip(false)} + > + {({ isOpen }) => ( + <> + setShowTooltip(false)} + > + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + + + + + changeLanguage('pt')} + letterSpacing="0.1px" + lineHeight="18px" + fontWeight="400" + fontSize="12px" + fontFamily="Roboto" + color="#252A32" + backgroundColor="#FFF" + padding="0 16px 10px" + _focus={{backgroundColor: "transparent"}} + _hover={{backgroundColor: "transparent", opacity: "0.7"}} + > + Português + + changeLanguage('en')} + letterSpacing="0.1px" + lineHeight="18px" + fontWeight="400" + fontSize="12px" + fontFamily="Roboto" + color="#252A32" + backgroundColor="#FFF" + padding="0 16px 10px" + _focus={{backgroundColor: "transparent"}} + _hover={{backgroundColor: "transparent", opacity: "0.7"}} + > + English + + changeLanguage('es')} + letterSpacing="0.1px" + lineHeight="18px" + fontWeight="400" + fontSize="12px" + fontFamily="Roboto" + color="#252A32" + backgroundColor="#FFF" + padding="0 16px 10px" + _focus={{backgroundColor: "transparent"}} + _hover={{backgroundColor: "transparent", opacity: "0.7"}} + > + Español + + + + )} ); } \ No newline at end of file diff --git a/next/components/organisms/DatasetCard.js b/next/components/organisms/DatasetCard.js index 2aeca54e8..672a4579f 100644 --- a/next/components/organisms/DatasetCard.js +++ b/next/components/organisms/DatasetCard.js @@ -186,7 +186,8 @@ export default function DatasetCard({ )} {/* para não noindex ambientes de development e staging */} - + {locale === 'en' ? + + : + + } {locale === 'en' ? 'Data Basis' : locale === 'es' ? 'Base de los Datos' : 'Base dos Dados'} @@ -52,14 +56,14 @@ function MyApp({ Component, pageProps }) { {/* Open Graph */} ( > - - - - + + + + ) diff --git a/next/public/img/logos/db_logo.js b/next/public/img/logos/db_logo.js index e67708111..9ef71b265 100644 --- a/next/public/img/logos/db_logo.js +++ b/next/public/img/logos/db_logo.js @@ -14,10 +14,10 @@ const DBLogoImage = ({widthImage = "130px", heightImage="60px", ...style}) => ( width={widthImage} height={heightImage} > - - - - + + + + )