Merge pull request #12 from ethereum/downloads-mobile

Downloads mobile

src/components/UI/DataTable.tsx

@@ -0,0 +1,95 @@
+import {
+  Table,
+  Thead,
+  Tr,
+  Th,
+  TableContainer,
+  Text,
+  Tbody,
+  Td,
+} from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  columnHeaders: string[]
+  data: any
+}
+
+export const DataTable: FC<Props> = ({
+  columnHeaders,
+  data,
+}) => {
+  return (
+    <TableContainer
+      // Note: This wont work on firefox, we are ok with this.
+      css={{
+        "&::-webkit-scrollbar": {
+          borderTop: '2px solid #11866f',
+          height: 18
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: "#11866f",
+        },
+      }}
+      pt={4}
+      pb={4}
+    >
+      <Table variant='unstyled'>
+        <Thead>
+          <Tr>
+            {
+              columnHeaders.map((columnHeader, idx) => {
+                return (
+                  <Th
+                    key={idx}
+                    textTransform='none'
+                    minW={'130.5px'}
+                    px={4}
+                  >
+                    <Text
+                      fontFamily='"JetBrains Mono", monospace'
+                      fontWeight={700}
+                      fontSize='md'
+                      color='#868b87'
+                    >
+                      {columnHeader}
+                    </Text>
+                  </Th>
+                )
+              })
+            }
+          </Tr>
+        </Thead>
+        <Tbody>
+          {
+            data.map((item: any, idx: number) => {
+              return (
+                <Tr
+                  key={idx}
+                  // TODO: Get new background color from nuno for hover
+                  transition={'all 0.5s'}
+                  _hover={{background: 'green.50', transition: 'all 0.5s'}}
+                >
+                  {
+                    columnHeaders.map((columnHeader, idx) => {
+                      // TODO: Make the font size smaller (refer to design system)
+                      return (
+                        <Td
+                          key={idx}
+                          px={4}
+                          fontSize='13px'
+                        >
+                          {item[columnHeader.toLowerCase()]}
+                        </Td>
+                      )
+                    })
+                  }
+                </Tr>
+              )
+            })
+          }
+        </Tbody>
+      </Table>
+    </TableContainer>
+  )
+}

src/components/UI/downloads/DownloadsHero.tsx

@@ -0,0 +1,107 @@
+import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'
+
+interface DownloadsHero {
+  currentBuildName: string
+  currentBuildVersion: string
+  linuxBuildURL: string
+  macOSBuildURL: string
+  releaseNotesURL: string
+  sourceCodeURL: string
+  windowsBuildURL: string
+}
+
+export const DownloadsHero: FC<DownloadsHero> = ({
+  currentBuildName,
+  currentBuildVersion,
+  linuxBuildURL,
+  macOSBuildURL,
+  releaseNotesURL,
+  sourceCodeURL,
+  windowsBuildURL
+}) => {
+  DOWNLOAD_HEADER_BUTTONS.linuxBuild.buildURL = linuxBuildURL
+  DOWNLOAD_HEADER_BUTTONS.macOSBuild.buildURL = macOSBuildURL
+  DOWNLOAD_HEADER_BUTTONS.windowsBuild.buildURL = windowsBuildURL
+  DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL
+
+  return (
+    <Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}>
+      <Stack alignItems='center'>
+        <Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' />  
+      </Stack>
+
+      <Box mb={4}>
+        <Box
+          as='h1'
+          textStyle='h1'
+        >
+          Download go-ethereum
+        </Box>
+
+        <Text
+          // TODO: move text style to theme
+          fontFamily='"JetBrains Mono", monospace'
+          lineHeight='21px'
+          mb={8}
+        >
+          {currentBuildName} ({currentBuildVersion})
+        </Text>
+
+        <Text mb={4}>
+          You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide.
+        </Text>
+
+        {
+          Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
+            return (
+              <NextLink
+                key={key}
+                href={DOWNLOAD_HEADER_BUTTONS[key].buildURL}
+                passHref
+              >
+                <Button
+                  as='a'
+                  variant='primary'
+                  width={{ base: '100%' }}
+                  p={8}
+                  mb={4}
+                >
+                  <HStack spacing={4}>
+                    <Stack alignItems='center'>
+                      <Image
+                        src={DOWNLOAD_HEADER_BUTTONS[key].image}
+                        alt={DOWNLOAD_HEADER_BUTTONS[key].imageAlt}
+                      />
+                    </Stack>  
+                    <Box>
+                      <Text textStyle='downloads-button-label'>
+                        For {DOWNLOAD_HEADER_BUTTONS[key].name}
+                      </Text>
+                      <Text textStyle='downloads-button-label'>
+                        geth {currentBuildName}
+                      </Text>
+                    </Box>
+                  </HStack>
+                </Button>
+              </NextLink>
+            )
+          })
+        }
+
+        <Box textAlign={'center'}>
+          <Link
+            href={releaseNotesURL}
+            isExternal
+            variant='light'
+          >
+            Release notes for {currentBuildName} {currentBuildVersion}
+          </Link>
+        </Box>
+      </Box>
+    </Stack>
+  );
+};

src/components/UI/downloads/DownloadsSection.tsx

@@ -0,0 +1,44 @@
+import { Box, Image, Stack } from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  id: string;
+  imgSrc?: string;
+  imgAltText?: string;
+  sectionTitle: string
+}
+
+export const DownloadsSection: FC<Props> = ({
+  children,
+  imgSrc,
+  imgAltText,
+  sectionTitle,
+  id
+}) => {
+  return (
+    <Stack border='2px solid' borderColor='brand.light.primary' id={id}>
+      {!!imgSrc && (
+        <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+          {/* TODO: use NextImage */}
+          <Image src={imgSrc} alt={imgAltText} />
+        </Stack>
+      )}
+
+      <Stack
+        p={4}
+        borderBottom='2px solid'
+        borderColor='brand.light.primary'
+        sx={{ mt: '0 !important' }}
+      >
+        <Box as='h2' textStyle='h2'>
+          {sectionTitle}
+        </Box>
+      </Stack>
+
+      <Stack spacing={4}>
+        {children}
+      </Stack>
+    </Stack>
+  )
+}

src/components/UI/downloads/DownloadsTable.tsx

@@ -0,0 +1,99 @@
+import {
+  Stack,
+  Tabs,
+  TabList,
+  Tab,
+  Text,
+  TabPanel,
+  TabPanels,
+} from '@chakra-ui/react';
+import { FC } from 'react';
+
+import {
+  DOWNLOAD_TABS,
+  DOWNLOAD_TAB_COLUMN_HEADERS
+} from '../../../constants'
+
+import { DataTable } from '../DataTable'
+
+interface Props {
+  data: any
+}
+
+export const DownloadsTable: FC<Props> = ({
+  data
+}) => {
+  return (
+    <Stack
+      sx={{ mt: '0 !important' }}
+      borderBottom='2px solid'
+      borderColor='brand.light.primary'
+    >
+      <Tabs variant='unstyled'>
+        <TabList
+          color='brand.light.primary'
+          bg='green.50'
+        >
+          {
+            DOWNLOAD_TABS.map((tab, idx) => {
+              return (
+                <Tab
+                  key={tab}
+                  w={'20%'}
+                  p={4}
+                  _selected={{
+                    bg: 'brand.light.primary',
+                    color: 'yellow.50',
+                  }}
+                  borderBottom='2px solid'
+                  borderRight={
+                    idx === (DOWNLOAD_TABS.length - 1)
+                      ?'none'
+                      :'2px solid'
+                  }
+                  borderColor='brand.light.primary'
+                >
+                  <Text textStyle='download-tab-label'>
+                    {tab}
+                  </Text>
+                </Tab>
+              )
+            })
+          }
+        </TabList>
+        <TabPanels>
+          <TabPanel p={0}>
+            <DataTable
+              columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
+              data={data}
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <DataTable
+              columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
+              data={data}
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <DataTable
+              columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
+              data={data}
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <DataTable
+              columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
+              data={data}
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <DataTable
+              columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
+              data={data}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Stack>
+  )
+}

src/components/UI/downloads/index.ts

@@ -0,0 +1,3 @@
+export * from './DownloadsHero';
+export * from './DownloadsSection'
+export * from './DownloadsTable'