ntasicc
/
coffee
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

refactor: localization

localization
ntasicc 3 lat temu
rodzic
734f2f3854
commit
d3154fd815
10 zmienionych plików z 68 dodań i 23 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 5
    3
      components/buttons/load-more/LoadMore.jsx
  2. 3
    1
      components/product-card/ProductCard.jsx
  3. 7
    5
      components/product-type/ProductType.jsx
  4. 1
    1
      components/products-content/ProductsContent.jsx
  5. 4
    5
      components/products-hero/ProductsHero.jsx
  6. 6
    4
      components/sort/Sort.jsx
  7. 9
    3
      components/tab-content/TabContent.jsx
  8. 5
    1
      pages/products/[customId].js
  9. 9
    0
      pages/products/index.js
  10. 19
    0
      public/locales/en/products.json

+ 5
- 3
components/buttons/load-more/LoadMore.jsx Wyświetl plik

@@ -1,8 +1,10 @@
import { Button } from '@mui/material';
import CircularProgress from '@mui/material/CircularProgress';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';

const LoadMore = ({ fetchNextPage, isFetchingNextPage, hasNextPage }) => {
const { t } = useTranslation('products');
return (
<Button
onClick={fetchNextPage}
@@ -38,10 +40,10 @@ const LoadMore = ({ fetchNextPage, isFetchingNextPage, hasNextPage }) => {
/>
)}
{isFetchingNextPage
? 'Loading...'
? t('products:loading')
: hasNextPage
? 'Load More'
: 'Nothing more to load'}
? t('products:more')
: t('products:end')}
</Button>
);
};

+ 3
- 1
components/product-card/ProductCard.jsx Wyświetl plik

@@ -1,10 +1,12 @@
import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import NextLink from 'next/link';
import { useStore, useStoreUpdate } from '../../store/cart-context';

const ProductCard = ({ product }) => {
const { t } = useTranslation('products');
const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore();
const addProductToCart = (quantity) => addCartValue(product, quantity);
@@ -92,7 +94,7 @@ const ProductCard = ({ product }) => {
color: 'white',
}}
>
{inCart ? 'In Cart' : 'Add to cart'}
{inCart ? t('products:in') : t('products:add')}
</Button>
</Box>
</Box>

+ 7
- 5
components/product-type/ProductType.jsx Wyświetl plik

@@ -1,23 +1,25 @@
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { useTranslation } from 'next-i18next';

const ProductType = ({ productType, handleProductTypeChange }) => {
const { t } = useTranslation('products');
return (
<>
<FormControl sx={{ width: '200px' }}>
<InputLabel id="product-type-label">Product Type</InputLabel>
<InputLabel id="product-type-label">{t('products:type')}</InputLabel>
<Select
MenuProps={{
disableScrollLock: true,
}}
label="Product Type"
label={t('products:tpe')}
labelId="product-type-label"
id="product-type-label"
value={productType}
onChange={handleProductTypeChange}
>
<MenuItem value="All">All</MenuItem>
<MenuItem value="Coffee">Coffee</MenuItem>
<MenuItem value="Mug">Mug</MenuItem>
<MenuItem value="All">{t('products:all')}</MenuItem>
<MenuItem value="Coffee">{t('products:coffee')}</MenuItem>
<MenuItem value="Mug">{t('products:mug')}</MenuItem>
</Select>
</FormControl>
</>

+ 1
- 1
components/products-content/ProductsContent.jsx Wyświetl plik

@@ -31,7 +31,7 @@ const ProductsContent = () => {
}}
>
<Head>
<title>NextJS template</title>
<title>Coffee Shop</title>
<meta name="description" content="Random data with pagination..." />
</Head>
<ProductsHero />

+ 4
- 5
components/products-hero/ProductsHero.jsx Wyświetl plik

@@ -1,7 +1,9 @@
import { Container, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';

const ProductsHero = () => {
const { t } = useTranslation('products');
return (
<Box
sx={{
@@ -25,16 +27,13 @@ const ProductsHero = () => {
fontSize: { md: '64px', sm: '46px', xs: '32px' },
}}
>
Welcome to our Store!
{t('products:title')}
</Typography>
<Typography
sx={{ fontSize: { xs: '16px', sm: '18px', md: '24px' } }}
align="center"
>
Our focus is to bring you the very best in the world of coffee.
Everything from fresh coffee beans, the best coffee powders and
capsules as well as other miscellaneous items such as cups and mugs.
Take a look to see if anything takes your fancy.
{t('products:description')}
</Typography>
</Container>
</Box>

+ 6
- 4
components/sort/Sort.jsx Wyświetl plik

@@ -1,6 +1,8 @@
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { useTranslation } from 'next-i18next';

const Sort = ({ sort, handleSortChange }) => {
const { t } = useTranslation('products');
return (
<>
<FormControl
@@ -10,19 +12,19 @@ const Sort = ({ sort, handleSortChange }) => {
mr: { sm: '10px' },
}}
>
<InputLabel id="sort-label">Sort</InputLabel>
<InputLabel id="sort-label">{t('products:sort')}</InputLabel>
<Select
MenuProps={{
disableScrollLock: true,
}}
label="Sort"
label={t('products:sort')}
labelId="sort-label"
id="sort-select-helper"
value={sort}
onChange={handleSortChange}
>
<MenuItem value="asc">Name - A-Z</MenuItem>
<MenuItem value="desc">Name - Z-A</MenuItem>
<MenuItem value="asc">{t('products:asc')}</MenuItem>
<MenuItem value="desc">{t('products:desx')}</MenuItem>
</Select>
</FormControl>
</>

+ 9
- 3
components/tab-content/TabContent.jsx Wyświetl plik

@@ -1,5 +1,6 @@
import { Button, Grid, Tab, Tabs, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import { useState } from 'react';
import TabPanel from '../tab-panel/TabPanel';

@@ -11,6 +12,7 @@ const TabContent = ({
addProductToCart,
}) => {
const [value, setValue] = useState(0);
const { t } = useTranslation('products');

const handleChange = (event, newValue) => {
setValue(newValue);
@@ -43,10 +45,14 @@ const TabContent = ({
sx={{
width: '50%',
}}
label="Purchase"
label={t('products:purchase')}
{...a11yProps(0)}
/>
<Tab sx={{ width: '50%' }} label="Category" {...a11yProps(1)} />
<Tab
sx={{ width: '50%' }}
label={t('products:category')}
{...a11yProps(1)}
/>
</Tabs>
<TabPanel value={value} index={0}>
<Box flexGrow={2} sx={{ pb: { xs: '70px' } }}>
@@ -71,7 +77,7 @@ const TabContent = ({
color: 'white',
}}
>
{inCart ? 'In Cart' : 'Add to cart'}
{inCart ? t('products:in') : t('products:add')}
</Button>
</Box>
</TabPanel>

+ 5
- 1
pages/products/[customId].js Wyświetl plik

@@ -1,6 +1,8 @@
import { Grid, Typography } from '@mui/material';
import { Box, Container } from '@mui/system';
import { dehydrate, QueryClient } from '@tanstack/react-query';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
@@ -13,6 +15,7 @@ import { getProductData } from '../../requests/products/producDataRequest';
import { useStore, useStoreUpdate } from '../../store/cart-context';

const SingleProduct = () => {
const { t } = useTranslation('products');
const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore();

@@ -74,7 +77,7 @@ const SingleProduct = () => {
fontSize: '32px',
}}
>
Similar Products You May Like
{t('products:similar')}
</Typography>
<Grid container spacing={2}>
{data.similarProducts.map((product) => (
@@ -102,6 +105,7 @@ export const getServerSideProps = async (context) => {
return {
props: {
dehydratatedState: dehydrate(queryClient),
...(await serverSideTranslations(context.locale, ['products'])),
},
};
};

+ 9
- 0
pages/products/index.js Wyświetl plik

@@ -1,7 +1,16 @@
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import ProductsContent from '../../components/products-content/ProductsContent';

const Products = () => {
return <ProductsContent></ProductsContent>;
};

export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['products'])),
},
};
}

export default Products;

+ 19
- 0
public/locales/en/products.json Wyświetl plik

@@ -0,0 +1,19 @@
{
"title": "Welcome to our Store!",
"description": " Our focus is to bring you the very best in the world of coffee. Everything from fresh coffee beans, the best coffee powders and capsules as well as other miscellaneous items such as cups and mugs. Take a look to see if anything takes your fancy.",
"sort": "Sort",
"asc": "Name - A-Z",
"desc": "Name - Z-A",
"type": "Product Type",
"all": "All",
"coffee": "Coffee",
"mug": "mug",
"loading": "Loading...",
"more": "Load More",
"end": "Nothing more to load",
"add": "Add to cart",
"in": "In Cart",
"similar": "Similar Products You May Like",
"purchase": "Purchase",
"category": "Category"
}

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz