From c8b767e4a629b5afbc5e0f401e80524e0b24fbca Mon Sep 17 00:00:00 2001
From: dbrosio3 <daniel.brosio@rootstrap.com>
Date: Thu, 26 May 2022 18:18:39 +0200
Subject: [PATCH] improved footer components

---
 src/components/Footer/FooterContainer.tsx   |  3 +-
 src/components/Footer/LinksColumn.tsx       | 24 +++++++
 src/components/Footer/LinksSection.tsx      | 73 ++++++---------------
 src/components/Footer/NewsletterSection.tsx |  2 +-
 4 files changed, 47 insertions(+), 55 deletions(-)
 create mode 100644 src/components/Footer/LinksColumn.tsx

diff --git a/src/components/Footer/FooterContainer.tsx b/src/components/Footer/FooterContainer.tsx
index fa413a4..51cd00d 100644
--- a/src/components/Footer/FooterContainer.tsx
+++ b/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',
   },
 });
diff --git a/src/components/Footer/LinksColumn.tsx b/src/components/Footer/LinksColumn.tsx
new file mode 100644
index 0000000..c653b8e
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/Footer/LinksSection.tsx b/src/components/Footer/LinksSection.tsx
index b8ad1c7..4f6ae13 100644
--- a/src/components/Footer/LinksSection.tsx
+++ b/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>
+);
diff --git a/src/components/Footer/NewsletterSection.tsx b/src/components/Footer/NewsletterSection.tsx
index 2706ead..e686e98 100644
--- a/src/components/Footer/NewsletterSection.tsx
+++ b/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>