downloadstable section

src/components/UI/downloads/DownloadsSection.tsx

@@ -10,7 +10,14 @@ interface Props {
   sectionTitle: string;
 }
 
-export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionDescription, sectionTitle, id }) => {
+export const DownloadsSection: FC<Props> = ({
+  children,
+  imgSrc,
+  imgAltText,
+  sectionDescription,
+  sectionTitle,
+  id
+}) => {
   return (
     <Stack border='2px solid' borderColor='brand.light.primary' id={id}>
       {!!imgSrc && (
@@ -23,36 +30,30 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
       <Flex
         borderBottom='2px solid'
         borderColor='brand.light.primary'
-        flexDirection={{base: 'column', md: 'row'}}
+        flexDirection={{ base: 'column', md: 'row' }}
       >
-        <Flex
+        <Flex p={4} sx={{ mt: '0 !important' }} flex='none'>
-          p={4}
-          sx={{ mt: '0 !important' }}
-          flex='none'
-        >
           <Center>
             <Text as='h2' textStyle='h2'>
               {sectionTitle}
             </Text>
           </Center>
         </Flex>
-        
+
-        {
+        {sectionDescription && (
-          sectionDescription && (
+          <Stack
-            <Stack
+            p={4}
-              p={4}
+            borderLeft={{ base: 'none', md: '2px solid #11866f' }}
-              borderLeft={{ base: 'none', md: '2px solid #11866f'}}
+            borderTop={{ base: '2px solid #11866f', md: 'none' }}
-              borderTop={{ base: '2px solid #11866f', md: 'none'}}
+          >
-            >
+            <Center>{sectionDescription}</Center>
-              <Center>
+          </Stack>
-                {sectionDescription}
+        )}
-              </Center>
-            </Stack>
-          )
-        }
       </Flex>
 
-      <Stack spacing={4} sx={{ mt: '0 !important' }} >{children}</Stack>
+      <Stack spacing={4} sx={{ mt: '0 !important' }}>
+        {children}
+      </Stack>
     </Stack>
   );
 };

src/components/UI/downloads/SpecificVersionsSection.tsx

@@ -8,25 +8,23 @@ interface Props {
 export const SpecificVersionsSection: FC<Props> = ({ children }) => {
   return (
     <Flex
-      id="specificversions"
+      id='specificversions'
       border='2px solid'
       borderColor='brand.light.primary'
-      flexDir={{base: 'column', md: 'row'}}
+      flexDir={{ base: 'column', md: 'row' }}
     >
       <Flex
         p={4}
         alignItems='center'
         justifyContent='center'
-        borderBottom={{ base: '2px solid #11866f', md: 'none'}}
+        borderBottom={{ base: '2px solid #11866f', md: 'none' }}
         borderRight={{ base: 'none', md: '2px solid #11866f' }}
         flex='none'
       >
         {/* TODO: use NextImage */}
         <Image src='/images/pages/gopher-home-side-desktop.svg' alt='Gopher facing right' />
       </Flex>
-      <Flex
+      <Flex flexDir='column'>
-        flexDir='column'
-      >
         <Stack
           p={4}
           borderBottom='2px solid'
@@ -41,4 +39,4 @@ export const SpecificVersionsSection: FC<Props> = ({ children }) => {
       </Flex>
     </Flex>
   );
-};
+};

src/components/UI/downloads/index.ts

@@ -1,4 +1,4 @@
 export * from './DownloadsHero';
 export * from './DownloadsSection';
 export * from './DownloadsTable';
-export * from './SpecificVersionsSection'
+export * from './SpecificVersionsSection';

src/pages/downloads.tsx

@@ -1,8 +1,13 @@
-import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
+import { Center, Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useState } from 'react';
 
-import { DownloadsHero, DownloadsSection, DownloadsTable, SpecificVersionsSection } from '../components/UI/downloads';
+import {
+  DownloadsHero,
+  DownloadsSection,
+  DownloadsTable,
+  SpecificVersionsSection
+} from '../components/UI/downloads';
 import { DataTable } from '../components/UI';
 
 import {
@@ -105,19 +110,37 @@ const DownloadsPage: NextPage = () => {
             {/* TODO: swap test data for real data */}
             <DownloadsTable data={testDownloadData.slice(0, amountStableReleases)} />
 
-            <Stack sx={{ mt: '0 !important' }}>
+            <Flex
-              <Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
+              sx={{ mt: '0 !important' }}
-                <Text
+              flexDirection={{ base: 'column', md: 'row' }}
-                  fontFamily='"JetBrains Mono", monospace'
+              justifyContent='space-between'
-                  fontWeight={700}
+            >
-                  textTransform='uppercase'
+              <Stack p={4} display={{ base: 'none', md: 'block' }}>
-                  textAlign='center'
+                <Center>
-                  p={4}
+                  {/* TODO: swap testDownloadData with actual data */}
-                >
+                  <Text>
-                  Show older releases
+                    Showing {amountStableReleases} latest releases of a total{' '}
-                </Text>
+                    {testDownloadData.length} releases
-              </Link>
+                  </Text>
-            </Stack>
+                </Center>
+              </Stack>
+              <Stack
+                sx={{ mt: '0 !important' }}
+                borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+              >
+                <Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
+                  <Text
+                    fontFamily='"JetBrains Mono", monospace'
+                    fontWeight={700}
+                    textTransform='uppercase'
+                    textAlign='center'
+                    p={4}
+                  >
+                    Show older releases
+                  </Text>
+                </Link>
+              </Stack>
+            </Flex>
           </DownloadsSection>
 
           <DownloadsSection
@@ -136,19 +159,37 @@ const DownloadsPage: NextPage = () => {
             {/* TODO: swap for real data */}
             <DownloadsTable data={testDownloadData.slice(0, amountDevelopBuilds)} />
 
-            <Stack sx={{ mt: '0 !important' }}>
+            <Flex
-              <Link as='button' variant='button-link-secondary' onClick={showMoreDevelopBuilds}>
+              sx={{ mt: '0 !important' }}
-                <Text
+              flexDirection={{ base: 'column', md: 'row' }}
-                  fontFamily='"JetBrains Mono", monospace'
+              justifyContent='space-between'
-                  fontWeight={700}
+            >
-                  textTransform='uppercase'
+              <Stack p={4} display={{ base: 'none', md: 'block' }}>
-                  textAlign='center'
+                <Center>
-                  p={4}
+                  {/* TODO: swap testDownloadData with actual data */}
-                >
+                  <Text>
-                  Show older releases
+                    Showing {amountDevelopBuilds} latest releases of a total{' '}
-                </Text>
+                    {testDownloadData.length} releases
-              </Link>
+                  </Text>
-            </Stack>
+                </Center>
+              </Stack>
+              <Stack
+                sx={{ mt: '0 !important' }}
+                borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+              >
+                <Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
+                  <Text
+                    fontFamily='"JetBrains Mono", monospace'
+                    fontWeight={700}
+                    textTransform='uppercase'
+                    textAlign='center'
+                    p={4}
+                  >
+                    Show older releases
+                  </Text>
+                </Link>
+              </Stack>
+            </Flex>
           </DownloadsSection>
 
           <DownloadsSection