Extract CTA to separate component

decentdao · May 3, 2024 · 8dbb4d7 · 8dbb4d7
1 parent bae6653
commit 8dbb4d7
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 59 deletions.
diff --git a/src/components/pages/AppHome/CTABox.tsx b/src/components/pages/AppHome/CTABox.tsx
@@ -0,0 +1,61 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { ReactNode } from 'react';
+
+export default function CTABox({
+  Icon,
+  titleKey,
+  descKey,
+  titleColor = 'white-0',
+  descColor = 'neutral-7',
+  bg = 'neutral-3',
+  to,
+  target,
+  pr,
+  iconContainerJustify,
+}: {
+  Icon: ReactNode;
+  titleKey: string;
+  descKey: string;
+  titleColor?: string;
+  descColor?: string;
+  bg?: string;
+  to: string;
+  target?: string;
+  pr?: string | number;
+  iconContainerJustify?: string;
+}) {
+  const { t } = useTranslation('home');
+  return (
+    <Flex
+      gap="3rem"
+      px="1.5rem"
+      w={{ base: '100%', lg: 'calc(50% - 0.75rem)' }}
+      h="10rem"
+      bg={bg}
+      alignItems="center"
+      borderRadius={8}
+      as={Link}
+      pr={pr}
+      to={to}
+      target={target}
+    >
+      <Box width="50%">
+        <Text
+          textStyle="display-2xl"
+          color={titleColor}
+        >
+          {t(titleKey)}
+        </Text>
+        <Text color={descColor}>{t(descKey)}</Text>
+      </Box>
+      <Flex
+        width="50%"
+        justifyContent={iconContainerJustify}
+      >
+        {Icon}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/components/pages/AppHome/FeaturedDAOCard.tsx b/src/components/pages/AppHome/FeaturedDAOCard.tsx
@@ -14,21 +14,18 @@ export interface FeaturedDAO {
   votingStrategy: string;
   address: string;
 }
-interface FeaturedDAOCardProps {
-  item: FeaturedDAO;
-}
+
+interface FeaturedDAOCardProps extends FeaturedDAO {}
 
 export default function FeaturedDAOCard({
-  item: {
-    iconSrc,
-    iconBg = 'lilac-0',
-    iconRounded = false,
-    titleKey,
-    network,
-    address,
-    networkName,
-    votingStrategy,
-  },
+  iconSrc,
+  iconBg = 'lilac-0',
+  iconRounded = false,
+  titleKey,
+  network,
+  address,
+  networkName,
+  votingStrategy,
 }: FeaturedDAOCardProps) {
   const { t } = useTranslation('home');
   return (

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,9 +1,9 @@
-import { VStack, Text, Flex, Box, Button } from '@chakra-ui/react';
+import { VStack, Text, Flex, Button } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 import { mainnet, sepolia } from 'wagmi/chains';
 import { AppFooter } from '../components/pages/AppHome/AppFooter';
+import CTABox from '../components/pages/AppHome/CTABox';
 import FeaturedDAOCard, { FeaturedDAO } from '../components/pages/AppHome/FeaturedDAOCard';
 import { CreateDAOIllustration, DocsIllustration } from '../components/ui/proposal/Icons';
 import { BASE_ROUTES } from '../constants/routes';
@@ -76,16 +76,6 @@ export default function HomePage() {
 
   const { chain } = useNetworkConfig();
   const featuredDaos = FEATURED_DAOS.get(chain.id);
-  const ctaBaseProps = {
-    gap: '3rem',
-    px: '1.5rem',
-    w: { base: '100%', lg: 'calc(50% - 0.75rem)' },
-    h: '10rem',
-    alignItems: 'center',
-    overflow: 'hidden',
-    borderRadius: 8,
-    as: Link,
-  };
   return (
     <Flex flexWrap="wrap">
       <VStack
@@ -101,42 +91,24 @@ export default function HomePage() {
           w="full"
           flexWrap="wrap"
         >
-          <Flex
-            {...ctaBaseProps}
-            bg="lilac-0"
+          <CTABox
+            titleKey="createCTA"
+            descKey="createDesc"
             to={BASE_ROUTES.create}
-          >
-            <Box width="50%">
-              <Text
-                textStyle="display-2xl"
-                color="cosmic-nebula-0"
-              >
-                {t('createCTA')}
-              </Text>
-              <Text color="cosmic-nebula-0">{t('createDesc')}</Text>
-            </Box>
-            <Box width="50%">
-              <CreateDAOIllustration />
-            </Box>
-          </Flex>
-          <Flex
-            {...ctaBaseProps}
-            pr={0}
-            bg="neutral-3"
+            Icon={<CreateDAOIllustration />}
+            titleColor="cosmic-nebula-0"
+            descColor="cosmic-nebula-0"
+            bg="lilac-0"
+          />
+          <CTABox
             to={URL_DOCS}
             target="_blank"
-          >
-            <Box width="50%">
-              <Text textStyle="display-2xl">{t('docsCTA')}</Text>
-              <Text color="neutral-7">{t('docsDesc')}</Text>
-            </Box>
-            <Flex
-              width="50%"
-              justifyContent="flex-end"
-            >
-              <DocsIllustration />
-            </Flex>
-          </Flex>
+            titleKey="docsCTA"
+            descKey="docsDesc"
+            Icon={<DocsIllustration />}
+            pr={0}
+            iconContainerJustify="flex-end"
+          />
         </Flex>
         {featuredDaos && featuredDaos.length > 0 ? (
           <VStack
@@ -154,7 +126,7 @@ export default function HomePage() {
               {featuredDaos.slice(0, shownItemsCount).map(dao => (
                 <FeaturedDAOCard
                   key={dao.titleKey}
-                  item={dao}
+                  {...dao}
                 />
               ))}
             </Flex>