Merge pull request #1 from Sokilskill/add-i18

Add i18
Sokilskill · Oct 22, 2024 · 0e13d69 · 0e13d69
2 parents 14f2f82 + 5a97bbf
commit 0e13d69
Show file tree

Hide file tree

Showing 52 changed files with 763 additions and 301 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,8 +14,11 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^11.0.20",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.0.2",
     "react-router-dom": "^6.22.3",
     "swiper": "^11.1.0"
   },
@@ -28,10 +31,10 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
-    "prettier": "^2.4.1"
+    "prettier": "^2.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,16 +13,17 @@ const App: React.FC = () => {
         path="/"
         element={
           <Suspense fallback={<SuspenseLoader />}>
-            <Box
-              w={{ base: "375px", md: "1024px", lg: "1440px" }}
-              position="relative"
-              minHeight="100vh"
-              mx="auto"
-              overflow={"hidden"}
-            >
-              <Background />
+            <Box overflow-x={"hidden"}>
+              <Box
+                w={{ base: "375px", md: "1024px", lg: "1440px" }}
+                position="relative"
+                minHeight="100vh"
+                mx="auto"
+              >
+                <Background />
 
-              <LandingPage />
+                <LandingPage />
+              </Box>
             </Box>
           </Suspense>
         }

diff --git a/src/assets/logo/logo-mobile.svg b/src/assets/logo/logo-mobile.svg
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -2,28 +2,32 @@ import { Flex, Image, useBreakpointValue } from "@chakra-ui/react";
 import { Animal } from "../../types";
 import { CardInfo } from "./CardInfo";
 import { CardButton } from "./CardButton";
+import { useTranslation } from "react-i18next";
 
 interface CardProps {
   item: Animal;
 }
 
 export const Card: React.FC<CardProps> = ({ item }) => {
-  const { imgLg, imgMob, name, age, description } = item;
+  const { t } = useTranslation();
+
+  const { imgLg, imgMob, translationKey, age, description } = item;
   const getImageSrc = useBreakpointValue({
     base: imgMob,
     md: imgLg,
     lg: imgLg,
   });
 
-  // форматування відображення віку
   const formatAge = () => {
     let ageText = "";
 
     if (age.year) {
-      ageText = `${age.year} ${Number(age.year) > 1 ? "роки" : "рік"} `;
+      ageText = `${age.year} ${
+        Number(age.year) > 1 ? t("card.years") : t("card.year")
+      } `;
     }
     if (age.month) {
-      ageText += `${age.month} місяців`;
+      ageText += `${age.month} ${t("card.months")}`;
     }
     return ageText;
   };
@@ -38,7 +42,10 @@ export const Card: React.FC<CardProps> = ({ item }) => {
         borderTopRightRadius={"80px"}
       />
       <Flex py="14px" justifyContent="space-between" alignItems="center">
-        <CardInfo name={name} ageText={formatAge()} />
+        <CardInfo
+          name={t(`animals.${translationKey}.name`)}
+          ageText={formatAge()}
+        />
 
         <CardButton />
       </Flex>

diff --git a/src/components/Card/CardInfo.tsx b/src/components/Card/CardInfo.tsx
@@ -1,10 +1,13 @@
 import { Box, Heading, Text } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 
 interface CardInfo {
   name: string;
   ageText: string;
 }
 export const CardInfo: React.FC<CardInfo> = ({ name, ageText }) => {
+  const { t } = useTranslation();
+
   return (
     <Box>
       <Heading
@@ -18,7 +21,7 @@ export const CardInfo: React.FC<CardInfo> = ({ name, ageText }) => {
       </Heading>
 
       <Text fontSize={{ lg: "24px" }} fontWeight={{ lg: 700 }}>
-        Вік {ageText}
+        {t("card.age")} {ageText}
       </Text>
     </Box>
   );

diff --git a/src/components/Footer/DonationInfo.tsx b/src/components/Footer/DonationInfo.tsx
@@ -1,19 +1,22 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 
 const DonationInfo: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <>
-      <Text>Допомогти матеріально:</Text>
-      <Text>ГО “ХАТИНА”</Text>
+      <Text>{t("donation.donate_financially")}:</Text>
+      <Text>{t("donation.ngo_name")}</Text>
       <Text text-wrap="nowrap">
-        ЄДРПОУ:
+        {t("donation.edrpou")}:
         <Box as="strong" fontWeight={{ sm: 500, md: 600 }}>
           123456789
         </Box>
       </Text>
-      <Text text-wrap="nowrap">Карта Приватбанку</Text>
+      <Text text-wrap="nowrap">{t("donation.privatbank_card")}</Text>
       <Text fontWeight={{ sm: 600 }}>4141 2929 4646 1111</Text>
-      <Text>Прокопів Петро Павлович</Text>
+      <Text>{t("donation.account_holder_name")}</Text>
     </>
   );
 };

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
 
-import { LogoTabletDesk } from "../Logo";
+import { Logo } from "../Logo";
 import { NavList } from "../NavList/NavList";
 import {
   listGoodness,
@@ -11,54 +11,52 @@ import { useBreakpoint } from "../../hooks/useBreakpoint";
 import { SocialSection } from "./SocialSection";
 import { NavigationListsContainer } from "./NavigationListContainer";
 import { HelpSection } from "./DonationInfo";
+import { useTranslation } from "react-i18next";
 
 const Footer: React.FC = () => {
   const breakpoint = useBreakpoint();
+  const { t } = useTranslation();
 
-  const MobileDesktopFooter = () => {
-    return (
+  const MobileDesktopFooter = () => (
+    <Flex
+      direction={{ base: "column", lg: "row" }}
+      alignItems={{ base: "center", lg: "flex-start" }}
+      justify={{ md: "space-between", lg: "center" }}
+      gap={{ base: "36px", md: "unset" }}
+      mb="44px"
+    >
+      <SocialSection>
+        <Logo />
+      </SocialSection>
+
+      <NavigationListsContainer>
+        <NavList listItem={listGoodness} aria-label="Goodness" />
+        <NavList listItem={listAbout} aria-label="About us" />
+        <NavList listItem={listContactDetails} aria-label="Contact details" />
+        <HelpSection />
+      </NavigationListsContainer>
+    </Flex>
+  );
+
+  const TabletFooter = () => (
+    <>
       <Flex
-        direction={{ base: "column", lg: "row" }}
-        alignItems={{ base: "center" }}
-        justify={{ md: "space-between", lg: "center" }}
-        gap={{ base: "36px", md: "unset" }}
+        flexDirection={{ md: "row" }}
+        justifyContent="space-between"
         mb="44px"
       >
-        <SocialSection>
-          <LogoTabletDesk />
-        </SocialSection>
-
-        <NavigationListsContainer>
-          <NavList listItem={listGoodness} aria-label="Goodness" />
-          <NavList listItem={listAbout} aria-label="About us" />
-          <NavList listItem={listContactDetails} aria-label="Contact details" />
-          <HelpSection />
-        </NavigationListsContainer>
+        <Logo style={{ mr: "0" }} />
+        <SocialSection />
+        <HelpSection />
       </Flex>
-    );
-  };
-
-  const TabletFooter = () => {
-    return (
-      <>
-        <Flex
-          flexDirection={{ md: "row" }}
-          justifyContent="space-between"
-          mb="44px"
-        >
-          <LogoTabletDesk style={{ mr: "unset" }} />
-          <SocialSection />
-          <HelpSection />
-        </Flex>
 
-        <NavigationListsContainer>
-          <NavList listItem={listAbout} aria-label="About us" />
-          <NavList listItem={listGoodness} aria-label="Goodness" />
-          <NavList listItem={listContactDetails} aria-label="Contact details" />
-        </NavigationListsContainer>
-      </>
-    );
-  };
+      <NavigationListsContainer>
+        <NavList listItem={listAbout} aria-label="About us" />
+        <NavList listItem={listGoodness} aria-label="Goodness" />
+        <NavList listItem={listContactDetails} aria-label="Contact details" />
+      </NavigationListsContainer>
+    </>
+  );
 
   return (
     <Box
@@ -69,14 +67,10 @@ const Footer: React.FC = () => {
       pb={{ base: "25px", md: "50px" }}
       px={{ base: "16px", md: "32px", lg: "40px" }}
     >
-      {breakpoint === "mobile" || breakpoint === "desktop" ? (
-        <MobileDesktopFooter />
-      ) : (
-        <TabletFooter />
-      )}
+      {breakpoint !== "laptop" ? <MobileDesktopFooter /> : <TabletFooter />}
 
       <Text textAlign="center" mt={20}>
-        © 2024. Всі права захищено <b>[email protected]</b>
+        © 2024. {t("policy")} <b>[email protected]</b>
       </Text>
     </Box>
   );