improved footer components

src/components/Footer/FooterContainer.tsx

@@ -3,7 +3,8 @@ import { chakra, Flex } from '@chakra-ui/react';
 export const FooterContainer = chakra(Flex, {
  baseStyle: {
  width: '100%',
- padding: 4,
+ px: 9,
+ py: 4,
  backgroundColor: 'secondary.main',
  },
 });

src/components/Footer/LinksColumn.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { GridItem, Heading, Text, VStack } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+export const LinksColumn: React.FC<{ sectionKey: string; links: Array<string> }> = ({
+ sectionKey,
+ links,
+}) => {
+ const { t } = useTranslation();
+
+ return (
+ <GridItem w="100%">
+ <VStack color="white" align="start" flexGrow={1}>
+ <Heading as="h6" size="xs">
+ {t(`footer.${sectionKey}.title`)}
+ </Heading>
+ {links.map(link => (
+ <Text key={link}>{t(`footer.${sectionKey}.${link}`)}</Text>
+ ))}
+ </VStack>
+ </GridItem>
+ );
+};

src/components/Footer/LinksSection.tsx

@@ -1,56 +1,23 @@
 import React from 'react';
 
-import { VStack, Heading, Text, Grid, GridItem } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import { Grid } from '@chakra-ui/react';
 
-export const LinksSection = () => {
- const { t } = useTranslation();
- return (
- <Grid
- templateColumns={{ base: 'repeat(2, 1fr)', sm: 'repeat(4, 1fr)' }}
- gap={6}
- w="100%"
- my={6}
- >
- <GridItem w="100%">
- <VStack color="white" align="start" flexGrow={1}>
- <Heading as="h6" size="xs">
- {t('footer.restoredFurniture.title')}
- </Heading>
- <Text>{t('footer.restoredFurniture.entries')}</Text>
- <Text>{t('footer.restoredFurniture.rates')}</Text>
- <Text>{t('footer.restoredFurniture.categories')}</Text>
- <Text>{t('footer.restoredFurniture.sale')}</Text>
- </VStack>
- </GridItem>
- <GridItem w="100%">
- <VStack color="white" align="start" flexGrow={1}>
- <Heading as="h6" size="xs">
- {t('footer.socialNetworks.title')}
- </Heading>
- <Text>{t('footer.socialNetworks.instagram')}</Text>
- <Text>{t('footer.socialNetworks.msn')}</Text>
- </VStack>
- </GridItem>
- <GridItem w="100%">
- <VStack color="white" align="start" flexGrow={1}>
- <Heading as="h6" size="xs">
- {t('footer.blackMarket.title')}
- </Heading>
- <Text>{t('footer.blackMarket.ourHistory')}</Text>
- <Text>{t('footer.blackMarket.staff')}</Text>
- <Text>{t('footer.blackMarket.workWithUs')}</Text>
- </VStack>
- </GridItem>
- <GridItem w="100%">
- <VStack color="white" align="start" flexGrow={1}>
- <Heading as="h6" size="xs">
- {t('footer.support.title')}
- </Heading>
- <Text>{t('footer.support.chat')}</Text>
- <Text>{t('footer.support.address')}</Text>
- </VStack>
- </GridItem>
- </Grid>
- );
-};
+import { LinksColumn } from './LinksColumn';
+
+export const LinksSection = () => (
+ <Grid
+ templateColumns={{ base: 'repeat(2, 1fr)', sm: 'repeat(4, 1fr)' }}
+ gap={6}
+ w="100%"
+ my={6}
+ whiteSpace="nowrap"
+ >
+ <LinksColumn
+ sectionKey="restoredFurniture"
+ links={['entries', 'rates', 'categories', 'sale']}
+ />
+ <LinksColumn sectionKey="socialNetworks" links={['instagram', 'tikTok', 'msn']} />
+ <LinksColumn sectionKey="blackMarket" links={['ourHistory', 'staff', 'workWithUs']} />
+ <LinksColumn sectionKey="support" links={['chat', 'address']} />
+ </Grid>
+);

src/components/Footer/NewsletterSection.tsx

@@ -14,7 +14,7 @@ export const NewsletterSection = () => {
  return (
  <Formik initialValues={{ email: '' }} onSubmit={() => {}}>
  <Container w="100%" maxW="400px" p={0} my={5}>
- <VStack color="white" align="start" w="100%" minW="300px">
+ <VStack color="white" align="start" w="100%" minW="250px">
  <Heading as="h5" size={headerSize}>
  {t('footer.newsletter.title')}
  </Heading>