Tradução do frontend v0

next/components/atoms/FilterAccordion.js

@@ -11,10 +11,11 @@ import {
  Skeleton
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
+import { useTranslation } from 'next-i18next';
 import Checkbox from "../atoms/Checkbox";
 import { ControlledInput, ControlledInputSimple} from "./ControlledInput";
 import SectionText from "./SectionText";
-import SearchIcon from "../../public/img/icons/searchIcon"
+import SearchIcon from "../../public/img/icons/searchIcon";
 
 export function BaseFilterAccordion({
  fieldName,
@@ -26,6 +27,8 @@ export function BaseFilterAccordion({
  alwaysOpen = false,
  isHovering = true
 }) {
+ const { t } = useTranslation('common');
+
  return (
  <Accordion allowToggle width="100%">
  <AccordionItem border="0px">
@@ -85,6 +88,7 @@ export function CheckboxFilterAccordion({
  canSearch = false,
  isLoading
 }) {
+ const { t } = useTranslation('common');
  const [options , setOptions] = useState([])
  const [search, setSearch] = useState("");
  const [inputFocus, setInputFocus] = useState(false)
@@ -130,7 +134,7 @@ export function CheckboxFilterAccordion({
  onChange={setSearch}
  inputFocus={inputFocus}
  changeInputFocus={setInputFocus}
- placeholder="Pesquisar"
+ placeholder={t('search')}
  fill="#464A51"
  icon={
  <SearchIcon
@@ -211,6 +215,7 @@ export function RangeFilterAccordion({
  maxValue = null,
  minValue = null,
 }) {
+ const { t } = useTranslation('common');
  const [min, setMin] = useState();
  const [max, setMax] = useState();
  const [error, setError] = useState(false);
@@ -245,7 +250,7 @@ export function RangeFilterAccordion({
  value={min}
  onChange={setMin}
  width="100%"
- placeholder="Min"
+ placeholder={t('min')}
  inputStyle={{
  height: "40px",
  fontSize: "14px",
@@ -258,7 +263,7 @@ export function RangeFilterAccordion({
  value={max}
  onChange={setMax}
  width="100%"
- placeholder="Max"
+ placeholder={t('max')}
  inputStyle={{
  height: "40px",
  fontSize: "14px",

next/components/atoms/HelpWidget.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
  Menu,
  MenuButton,
@@ -11,26 +12,51 @@ import HelpIcon from "../../public/img/icons/helpIcon"
 export default function HelpWidget({options, tooltip}) {
  const optionsRender = (options) => {
  return options.map((option, i) => {
- if(option.name){ return (
- <MenuItem
- key={i}
- 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"}}
- onClick={() => window.open(option.url, "_blank")}
- >
- {option.name}
- </MenuItem>)
- } else { return <MenuDivider key={i} margin="0 0 14px"/> }
- })
- }
+ if(option.name){ 
+ const menuItemProps = {
+ key: i,
+ 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"},
+ };
+
+ if (option.url) {
+ return (
+ <MenuItem
+ {...menuItemProps}
+ onClick={() => window.open(option.url, "_blank")}
+ >
+ {option.name}
+ </MenuItem>
+ );
+ } else if (option.component) {
+ return (
+ <MenuItem {...menuItemProps} as="div">
+ {React.cloneElement(option.component, {
+ style: {
+ letterSpacing: "0.1px",
+ lineHeight: "18px",
+ fontWeight: "400",
+ fontSize: "12px",
+ fontFamily: "Roboto",
+ color: "#252A32",
+ }
+ })}
+ </MenuItem>
+ );
+ }
+ } else { 
+ return <MenuDivider key={i} margin="0 0 14px"/>; 
+ }
+ });
+ };
 
  return (
  <Menu>

next/components/atoms/Link.js

@@ -1,4 +1,6 @@
-import { Link as ChakraLink } from "@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 
 export default function Link({
  children,
@@ -8,19 +10,26 @@ export default function Link({
  fontWeight = "700",
  ...props
 }) {
+ const { locale } = useRouter();
+
  return (
- <ChakraLink
- target={target}
- href={href}
- fontFamily="Lato"
- fontSize="14px"
- letterSpacing="0.5px"
- color={color}
- _hover={{ textDecoration: "none", opacity:"0.6" }}
- fontWeight={fontWeight}
- {...props}
- >
- {children}
- </ChakraLink>
+ <NextLink href={href || '#'} locale={locale} passHref legacyBehavior>
+ <Text
+ as="a"
+ display="flex"
+ flexDirection="row"
+ alignItems="center"
+ fontFamily="Roboto"
+ fontSize="14px"
+ lineHeight="20px"
+ fontWeight={fontWeight}
+ color={color}
+ target={target}
+ {...props}
+ >
+ {children}
+ </Text>
+ </NextLink>
  );
 }
+

next/components/atoms/ObservationLevelTable.js

@@ -7,9 +7,16 @@ import {
  Th,
  Td,
 } from "@chakra-ui/react";
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { capitalize } from "lodash";
 
 export default function ObservationLevel({ resource }) {
- const headers = ["Entidade","Colunas Correspondentes"]
+ const { t } = useTranslation('dataset');
+ const router = useRouter();
+ const { locale } = router;
+
+ const headers = [t('observationLevelTable.entityHeader'), t('observationLevelTable.columnsHeader')];
 
  let array = []
  const keys = Object.keys(resource?.observationLevels)
@@ -18,8 +25,9 @@ export default function ObservationLevel({ resource }) {
  const value = resource?.observationLevels[elm]
 
  const valueEntity = () => {
+ if(value.entity[`name${capitalize(locale)}`]) return value.entity[`name${capitalize(locale)}`]
  if(value.entity.name) return value.entity.name
- return "Não informado"
+ return t('observationLevelTable.notProvided')
  }
 
  const valueColumns = () => {
@@ -30,7 +38,7 @@ export default function ObservationLevel({ resource }) {
  columns.push(column?.name)
  })
  } else {
- columns = ["Não informado"]
+ columns = [t('observationLevelTable.notProvided')]
  }
  return columns.join(", ")
  }

next/components/atoms/SectionLink.js

@@ -1,36 +1,40 @@
 import { Link as ChakraLink } from "@chakra-ui/react";
+import NextLink from 'next/link';
 import { useEffect, useState } from "react";
 import { useCheckMobile } from "../../hooks/useCheckMobile.hook";
+import { useRouter } from 'next/router';
 
-export default function Link({
+export default function SectionLink({
  children,
  href,
  target,
  ...props
 }) {
  const [isMobileMod, setIsMobileMod] = useState(false)
  const isMobile = useCheckMobile();
+ const { locale } = useRouter();
 
  useEffect(() => {
  setIsMobileMod(isMobile)
  }, [isMobile])
 
  return (
- <ChakraLink
- width="fit-content"
- target={target}
- href={href}
- fontFamily="Ubuntu"
- fontSize={isMobileMod ? "12px" : "15px"}
- letterSpacing={isMobileMod ? "0.2px" : "0.1px"}
- fontWeight="700"
- color="#42B0FF"
- _hover={{ textDecoration: "none", opacity:"0.6" }}
- paddingBottom="4px"
- borderBottom="1px solid #42B0FF"
- {...props}
- >
- {children}
- </ChakraLink>
+ <NextLink href={href} locale={locale} passHref legacyBehavior>
+ <ChakraLink
+ width="fit-content"
+ target={target}
+ fontFamily="Ubuntu"
+ fontSize={isMobileMod ? "12px" : "15px"}
+ letterSpacing={isMobileMod ? "0.2px" : "0.1px"}
+ fontWeight="700"
+ color="#42B0FF"
+ _hover={{ textDecoration: "none", opacity:"0.6" }}
+ paddingBottom="4px"
+ borderBottom="1px solid #42B0FF"
+ {...props}
+ >
+ {children}
+ </ChakraLink>
+ </NextLink>
  );
 }

next/components/atoms/ThemeTag.js

@@ -1,24 +1,28 @@
-import { Tag } from "@chakra-ui/react";
+import Link from '../atoms/Link';
+import { Tag } from '@chakra-ui/react';
 
-export function ThemeTag({ name, ...style }) {
+export function ThemeTag({ slug, locale, ...props }) {
  return (
  <Tag
- position="relative"
- fontSize="10px"
- whiteSpace="nowrap"
  borderRadius="8px"
  padding="2px 8px"
- color="#252A32"
  backgroundColor="#DEDFE0"
  cursor="pointer"
- letterSpacing="0.2px"
- fontWeight="300"
- fontFamily="ubuntu"
- {...style}
  >
- <a href={`/dataset?tag=${name.toLowerCase()}`} target="_blank">
- {name}
- </a>
+ <Link
+ href={`/dataset?tag=${slug}`}
+ locale={locale}
+ fontWeight="300"
+ fontFamily="ubuntu"
+ fontSize="10px"
+ color="#252A32"
+ letterSpacing="0.2px"
+ position="relative"
+ whiteSpace="nowrap"
+ {...props}
+ >
+ {slug}
+ </Link>
  </Tag>
  );
 }