Merge pull request #12 from ArtelierMaisa/feat/i18n

feat: i18n

.eslintrc.json

@@ -16,19 +16,10 @@
     },
     "ecmaVersion": "latest"
   },
-  "plugins": [
-    "react-refresh",
-    "@typescript-eslint",
-    "simple-import-sort",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "simple-import-sort", "prettier"],
   "rules": {
     "prettier/prettier": "error",
     "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error",
-    "react-refresh/only-export-components": [
-      "warn",
-      { "allowConstantExport": true }
-    ]
+    "simple-import-sort/exports": "error"
   }
 }

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <link rel="shortcut icon" href="/favicon.png" type="image/png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon.png" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -13,6 +14,45 @@
       rel="stylesheet"
     />
 
+    <!-- Facebook -->
+    <meta property="og:title" content="Artelier Maisa" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="No Artelier Maisa, a arte encontra a alma e a criatividade se transforma em expressão. Somos uma plataforma dedicada a promover a arte em todas as suas formas, desde pinturas e esculturas até design e artesanato."
+    />
+    <meta property="og:image" content="/src/assets/images/primary-logo.jpg" />
+    <meta property="og:url" content="https://arteliermaisa.netlify.app/" />
+    <meta property="og:site_name" content="Artelier Maisa" />
+    <meta property="fb:admins" content="werockcontent" />
+
+    <!-- Twitter/X -->
+    <meta
+      name="twitter:card"
+      content="Acreditamos que a arte tem o poder de transformar vidas, criar conexões profundas e refletir a beleza do mundo ao nosso redor."
+    />
+    <meta name="twitter:url" content="https://arteliermaisa.netlify.app/" />
+    <meta name="twitter:title" content="Artelier Maisa" />
+    <meta
+      name="twitter:description"
+      content="No Artelier Maisa, a arte encontra a alma e a criatividade se transforma em expressão. Somos uma plataforma dedicada a promover a arte em todas as suas formas, desde pinturas e esculturas até design e artesanato."
+    />
+    <meta name="twitter:image" content="/src/assets/images/primary-logo.jpg" />
+
+    <!-- Engine -->
+    <meta
+      name="description"
+      content="No Artelier Maisa, a arte encontra a alma e a criatividade se transforma em expressão. Somos uma plataforma dedicada a promover a arte em todas as suas formas, desde pinturas e esculturas até design e artesanato."
+    />
+    <meta name="image" content="/src/assets/images/primary-logo.jpg" />
+
+    <!-- Google -->
+    <meta
+      itemprop="description"
+      content="No Artelier Maisa, a arte encontra a alma e a criatividade se transforma em expressão. Somos uma plataforma dedicada a promover a arte em todas as suas formas, desde pinturas e esculturas até design e artesanato."
+    />
+    <meta itemprop="image" content="/src/assets/images/primary-logo.jpg" />
+
     <title>Artelier Maisa</title>
   </head>
 

package.json

@@ -16,8 +16,11 @@
     "firebase": "^10.11.1",
     "flowbite": "^2.3.0",
     "flowbite-react": "^0.9.0",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.23.1",
     "react-scroll": "^1.9.0",
@@ -42,7 +45,6 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "git-commit-msg-linter": "^5.0.7",
     "husky": "^9.0.11",

src/@types/components/CarouselImage.ts

@@ -1,4 +1,4 @@
 export interface CarouselImageProps {
-  id: string;
   uri: string;
+  name: string;
 }

src/@types/components/Modal.ts

@@ -1,6 +1,7 @@
 export interface ProductImageProps {
   id: string;
   uri: string;
+  name: string;
 }
 
 export interface ProductProps {

src/@types/components/ProductCard.ts

@@ -1,5 +1,4 @@
 export interface ProductCardProps {
-  id: string;
   name: string;
   description: string;
   price: string;

src/@types/components/Translator.ts

@@ -0,0 +1,5 @@
+export type LanguageType = 'pt-BR' | 'en-US';
+
+export interface TranslatorProps {
+  path: string;
+}

src/@types/components/index.ts

@@ -10,4 +10,5 @@ export * from './ProductCard';
 export * from './SearchInput';
 export * from './Spinner';
 export * from './Text';
+export * from './Translator';
 export * from './WhatsAppButton';

src/@types/utils/whatsapp.ts

@@ -1,6 +1,4 @@
-import { WhatsAppButtonProps } from '../components';
-
-export type SendMessageType = 'footer' | 'whatsapp-button';
-export interface SendMessageProps extends Partial<WhatsAppButtonProps> {
-  type?: SendMessageType;
+export interface BuildWhatsAppUrlProps {
+  message: string;
+  phone?: string;
 }

src/App.tsx

@@ -1,6 +1,7 @@
 import './styles/global.scss';
 
 import { Flowbite } from 'flowbite-react';
+import { Toaster } from 'sonner';
 
 import { UserProvider } from './contexts';
 import { Router } from './routes';
@@ -9,6 +10,14 @@ import { flowbiteTheme } from './styles';
 function App() {
   return (
     <UserProvider>
+      <Toaster
+        position='bottom-right'
+        duration={5000}
+        closeButton
+        richColors
+        expand
+      />
+
       <Flowbite theme={{ theme: flowbiteTheme, mode: 'light' }}>
         <Router />
       </Flowbite>

src/components/Carousel/index.tsx

@@ -1,10 +1,11 @@
 import { Carousel as FlowbiteCarousel } from 'flowbite-react';
+import { memo } from 'react';
 
 import { CarouselProps } from '../../@types';
 import { carouselHeights } from '../../constants';
-import { CarouselButton } from '../CarouselButton';
+import { CarouselButton } from '../';
 
-export function Carousel(props: CarouselProps) {
+function Carousel(props: CarouselProps) {
   const {
     children,
     type = 'banner',
@@ -18,17 +19,30 @@ export function Carousel(props: CarouselProps) {
   const isBanner = type === 'banner';
   const slideInterval = isBanner ? 3000 : 5000;
 
+  const rightControl: React.JSX.Element = !hasChildren ? (
+    <span />
+  ) : (
+    <CarouselButton type='previous' />
+  );
+  const leftControl: React.JSX.Element = !hasChildren ? (
+    <span />
+  ) : (
+    <CarouselButton type='next' />
+  );
+
   return (
     <div className={`max-w-full ${carouselHeights[type]}`}>
       <FlowbiteCarousel
         slide={isSlide && !isProduct}
         slideInterval={slideInterval}
         indicators={showIndicators && isBanner && hasChildren}
-        rightControl={<CarouselButton type='previous' />}
-        leftControl={<CarouselButton type='next' />}
+        rightControl={rightControl}
+        leftControl={leftControl}
       >
         {children}
       </FlowbiteCarousel>
     </div>
   );
 }
+
+export default memo(Carousel);

src/components/CarouselButton/index.tsx

@@ -1,11 +1,13 @@
+import { memo } from 'react';
+
 import {
   CarouselButtonProps,
   CarouselButtonType,
   IconProps,
 } from '../../@types';
-import { Icon } from '../Icon';
+import { Icon, Translator } from '../';
 
-export function CarouselButton(props: CarouselButtonProps) {
+function CarouselButton(props: CarouselButtonProps) {
   const { type } = props;
 
   const isNext = type === 'next';
@@ -25,8 +27,14 @@ export function CarouselButton(props: CarouselButtonProps) {
       <span className='inline-flex items-center justify-center w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-primary group-hover:bg-primary60 group-focus:outline-none'>
         {icons[type]}
 
-        <span className='sr-only'>{isNext ? 'Próximo' : 'Anterior'}</span>
+        <span className='sr-only'>
+          <Translator
+            path={isNext ? 'carouselButton.next' : 'carouselButton.previous'}
+          />
+        </span>
       </span>
     </>
   );
 }
+
+export default memo(CarouselButton);