From caaedf033545f1b335805fd49a809b8659437053 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 16 Nov 2022 13:09:38 -0800
Subject: [PATCH] refactor to Section components to accept SVG prop

---
 .../UI/downloads/DownloadsSection.tsx         | 18 +++++++----------
 src/components/UI/homepage/HomeSection.tsx    | 20 +++++++------------
 src/pages/downloads.tsx                       |  4 +++-
 src/pages/index.tsx                           |  5 ++++-
 4 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx
index 9ade787b25..3fbd8a5634 100644
--- a/src/components/UI/downloads/DownloadsSection.tsx
+++ b/src/components/UI/downloads/DownloadsSection.tsx
@@ -1,24 +1,20 @@
-import { Box, Image, Stack } from '@chakra-ui/react';
+import { Box, IconProps, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
 
-import { GopherHomeLinks } from '../svgs'
 interface Props {
-  children: React.ReactNode;
   id: string;
-  imgSrc?: string;
-  imgAltText?: string;
   sectionTitle: string;
-  showGopher?: boolean;
+  children: React.ReactNode;
+  Svg?: React.FC<IconProps>;
+  ariaLabel?: string;
 }
 
-export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionTitle, id, showGopher }) => {
+export const DownloadsSection: FC<Props> = ({ children, Svg, ariaLabel, sectionTitle, id, showGopher }) => {
   return (
     <Stack border='2px solid' borderColor='primary' id={id}>
-      {imgSrc || showGopher && (
+      {Svg && (
         <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='primary'>
-          {/* TODO: use NextImage */}
-          {imgSrc && <Image src={imgSrc} alt={imgAltText} />}
-          {showGopher && < GopherHomeLinks/>}
+          <Svg aria-label={ariaLabel} />
         </Stack>
       )}
 
diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx
index 38a6544196..ad35389099 100644
--- a/src/components/UI/homepage/HomeSection.tsx
+++ b/src/components/UI/homepage/HomeSection.tsx
@@ -1,35 +1,29 @@
-import { Box, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, IconProps, Link, Stack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
 import NextLink from 'next/link';
 
-import { GopherHomeFront } from '../svgs/';
-
 interface Props {
-  imgSrc?: string;
-  imgAltText?: string;
   sectionTitle: string;
   linkLabel: string;
   buttonHref: string;
   children?: React.ReactNode;
-  showGopher?: boolean;
+  Svg?: React.FC<IconProps>;
+  ariaLabel?: string;
 }
 
 export const HomeSection: FC<Props> = ({
-  imgSrc,
-  imgAltText,
+  Svg,
+  ariaLabel,
   sectionTitle,
   linkLabel,
   buttonHref,
-  showGopher,
   children
 }) => {
   return (
     <Stack border='2px solid' borderColor='primary' h='100%'>
-      {imgSrc || showGopher && (
+      {Svg && (
         <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='primary'>
-          {/* TODO: use NextImage */}
-          {imgSrc && <Image src={imgSrc} alt={imgAltText} />}
-          {showGopher && <GopherHomeFront />}
+          <Svg aria-label={ariaLabel} />
         </Stack>
       )}
       <Stack
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 670f493b7b..14a715e327 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { DownloadsHero, DownloadsSection, DownloadsTable } from '../components/UI/downloads';
 import { DataTable } from '../components/UI';
+import { GopherDownloads } from '../components/UI/svgs'
 
 import {
   DEFAULT_BUILD_AMOUNT_TO_SHOW,
@@ -54,7 +55,8 @@ const DownloadsPage: NextPage = () => {
           <DownloadsSection
             sectionTitle='Specific Versions'
             id='specificversions'
-            showGopher
+            Svg={GopherDownloads}
+            ariaLabel="Gopher facing right"
           >
             <Stack p={4}>
               <Text textStyle='quick-link-text'>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9aed48222a..e37364a150 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,8 @@
 import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 
+import { GopherHomeFront } from '../components/UI/svgs';
+
 import {
   HomeHero,
   HomeSection,
@@ -35,7 +37,8 @@ const HomePage: NextPage = ({}) => {
                 sectionTitle='What is Geth'
                 linkLabel='Get started with Geth'
                 buttonHref={`${DOCS_PAGE}/getting-started`}
-                showGopher
+                Svg={GopherHomeFront}
+                ariaLabel='Gopher greeting'
               >
                 <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
                   Geth (go-ethereum) is a{' '}