diff --git a/public/images/pages/glyph-home-light.svg b/public/images/pages/glyph-home-light.svg index 2570757c50..36fed55efc 100644 --- a/public/images/pages/glyph-home-light.svg +++ b/public/images/pages/glyph-home-light.svg @@ -1,8 +1,8 @@ - - - - - - - + + + + + + + diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx index c1a260293b..c94cbc2d4d 100644 --- a/src/components/UI/DataTable.tsx +++ b/src/components/UI/DataTable.tsx @@ -1,35 +1,23 @@ -import { - Table, - Thead, - Tr, - Th, - TableContainer, - Text, - Tbody, - Td, -} from '@chakra-ui/react'; +import { Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react'; import { FC } from 'react'; interface Props { - columnHeaders: string[] - data: any + columnHeaders: string[]; + data: any; } -export const DataTable: FC = ({ - columnHeaders, - data, -}) => { +export const DataTable: FC = ({ columnHeaders, data }) => { return ( = ({ - { - columnHeaders.map((columnHeader, idx) => { - return ( - - ) - }) - } + {columnHeader} + + + ); + })} - { - data.map((item: any, idx: number) => { - return ( - - { - columnHeaders.map((columnHeader, idx) => { - // TODO: Make the font size smaller (refer to design system) - return ( - - ) - }) - } - - ) - }) - } + {data.map((item: any, idx: number) => { + return ( + + {columnHeaders.map((columnHeader, idx) => { + // TODO: Make the font size smaller (refer to design system) + return ( + + ); + })} + + ); + })}
{ + return ( + + - - {columnHeader} - -
- {item[columnHeader.toLowerCase()]} -
+ {item[columnHeader.toLowerCase()]} +
- ) -} \ No newline at end of file + ); +}; diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx new file mode 100644 index 0000000000..02892001f1 --- /dev/null +++ b/src/components/UI/Header.tsx @@ -0,0 +1,113 @@ +import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/react'; +import { FC } from 'react'; +import NextLink from 'next/link'; + +import { HamburguerIcon, LensIcon, MoonIcon } from '../UI/icons'; +import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; + +export const Header: FC = () => { + return ( + + + + go-ethereum + + + + + {/* DOWNLOADS */} + + + + + downloads + + + + + + {/* DOCUMENTATION */} + + + + + documentation + + + + + + {/* SEARCH */} + + + + + + + + + + + {/* DARK MODE SWITCH */} + + + + + {/* HAMBURGUER MENU */} + + + + + + ); +}; diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 67b30355be..2c01270953 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -2,16 +2,16 @@ 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' +import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'; interface DownloadsHero { - currentBuildName: string - currentBuildVersion: string - linuxBuildURL: string - macOSBuildURL: string - releaseNotesURL: string - sourceCodeURL: string - windowsBuildURL: string + currentBuildName: string; + currentBuildVersion: string; + linuxBuildURL: string; + macOSBuildURL: string; + releaseNotesURL: string; + sourceCodeURL: string; + windowsBuildURL: string; } export const DownloadsHero: FC = ({ @@ -23,22 +23,19 @@ export const DownloadsHero: FC = ({ 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 + 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 ( - Gopher plugged in + Gopher plugged in - + Download go-ethereum @@ -52,52 +49,37 @@ export const DownloadsHero: FC = ({ - 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're looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide. + 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're looking to install Geth and/or associated tools via your favorite + package manager, please check our installation guide. - { - Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { - return ( - - - - ) - }) - } + {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { + return ( + + + + ); + })} - + Release notes for {currentBuildName} {currentBuildVersion} diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx index 5e0fdf26a2..365bb49411 100644 --- a/src/components/UI/downloads/DownloadsSection.tsx +++ b/src/components/UI/downloads/DownloadsSection.tsx @@ -6,16 +6,10 @@ interface Props { id: string; imgSrc?: string; imgAltText?: string; - sectionTitle: string + sectionTitle: string; } -export const DownloadsSection: FC = ({ - children, - imgSrc, - imgAltText, - sectionTitle, - id -}) => { +export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sectionTitle, id }) => { return ( {!!imgSrc && ( @@ -36,9 +30,7 @@ export const DownloadsSection: FC = ({ - - {children} - + {children} - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx index 6fc7288b35..7dd5e52aac 100644 --- a/src/components/UI/downloads/DownloadsTable.tsx +++ b/src/components/UI/downloads/DownloadsTable.tsx @@ -1,99 +1,56 @@ -import { - Stack, - Tabs, - TabList, - Tab, - Text, - TabPanel, - TabPanels, -} from '@chakra-ui/react'; +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 { DOWNLOAD_TABS, DOWNLOAD_TAB_COLUMN_HEADERS } from '../../../constants'; -import { DataTable } from '../DataTable' +import { DataTable } from '../../UI'; interface Props { - data: any + data: any; } -export const DownloadsTable: FC = ({ - data -}) => { +export const DownloadsTable: FC = ({ data }) => { return ( - + - - { - DOWNLOAD_TABS.map((tab, idx) => { - return ( - - - {tab} - - - ) - }) - } + + {DOWNLOAD_TABS.map((tab, idx) => { + return ( + + {tab} + + ); + })} - + - + - + - + - + - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/UI/downloads/index.ts b/src/components/UI/downloads/index.ts index 597af494c8..11310c63fc 100644 --- a/src/components/UI/downloads/index.ts +++ b/src/components/UI/downloads/index.ts @@ -1,3 +1,3 @@ export * from './DownloadsHero'; -export * from './DownloadsSection' -export * from './DownloadsTable' \ No newline at end of file +export * from './DownloadsSection'; +export * from './DownloadsTable'; diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx index a98275fd17..1a4cb47e7e 100644 --- a/src/components/UI/homepage/Gopher.tsx +++ b/src/components/UI/homepage/Gopher.tsx @@ -3,7 +3,14 @@ import { FC } from 'react'; export const Gopher: FC = () => { return ( - + Gopher greeting ); diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx index b72354f27c..600c6715de 100644 --- a/src/components/UI/homepage/HomeHero.tsx +++ b/src/components/UI/homepage/HomeHero.tsx @@ -6,13 +6,22 @@ import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../../constants'; export const HomeHero: FC = () => { return ( - + go-ethereum diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx index 2287d34a5d..65730c0c6d 100644 --- a/src/components/UI/homepage/HomeSection.tsx +++ b/src/components/UI/homepage/HomeSection.tsx @@ -20,7 +20,7 @@ export const HomeSection: FC = ({ children }) => { return ( - + {!!imgSrc && ( {/* TODO: use NextImage */} @@ -45,6 +45,7 @@ export const HomeSection: FC = ({ borderBottom='2px solid' borderColor='brand.light.primary' sx={{ mt: '0 !important' }} + h='100%' > {children} diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx index 370226f288..bd7df05b9a 100644 --- a/src/components/UI/homepage/QuickLinks.tsx +++ b/src/components/UI/homepage/QuickLinks.tsx @@ -13,7 +13,10 @@ export const QuickLinks: FC = () => { - + {/* get started */} = ({ children }) => { + return ( + + + + + + What is Ethereum + + + + + {children} + + + + + + {/* TODO: use NextImage */} + Ethereum glyph + + + + + + + + Learn more on Ethereum.org + + + + + ); +}; diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx new file mode 100644 index 0000000000..f9cb05c75b --- /dev/null +++ b/src/components/UI/homepage/WhyRunANode.tsx @@ -0,0 +1,64 @@ +import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react'; +import { FC } from 'react'; +import NextLink from 'next/link'; + +import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants'; + +interface Props { + children: React.ReactNode; +} + +export const WhyRunANode: FC = ({ children }) => { + return ( + + + + + + Why run a node? + + + + + {children} + + + + + + {/* TODO: use NextImage */} + Gopher staring at nodes + + + + + + + + Read more about running a node + + + + + ); +}; diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts index 861cb5112f..95f8371b8c 100644 --- a/src/components/UI/homepage/index.ts +++ b/src/components/UI/homepage/index.ts @@ -1,4 +1,6 @@ export * from './Gopher'; export * from './HomeHero'; export * from './HomeSection'; +export * from './WhatIsEthereum'; +export * from './WhyRunANode'; export * from './QuickLinks'; diff --git a/src/components/UI/icons/HamburguerIcon.tsx b/src/components/UI/icons/HamburguerIcon.tsx new file mode 100644 index 0000000000..e352774f86 --- /dev/null +++ b/src/components/UI/icons/HamburguerIcon.tsx @@ -0,0 +1,16 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const HamburguerIcon = createIcon({ + displayName: 'HamburguerIcon', + viewBox: '0 0 22 14', + path: ( + + + + ) +}); diff --git a/src/components/UI/icons/LensIcon.tsx b/src/components/UI/icons/LensIcon.tsx new file mode 100644 index 0000000000..b38e00a37c --- /dev/null +++ b/src/components/UI/icons/LensIcon.tsx @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const LensIcon = createIcon({ + displayName: 'LensIcon', + viewBox: '0 0 17 18', + path: ( + + + + ) +}); diff --git a/src/components/UI/icons/MoonIcon.tsx b/src/components/UI/icons/MoonIcon.tsx new file mode 100644 index 0000000000..75153bd354 --- /dev/null +++ b/src/components/UI/icons/MoonIcon.tsx @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const MoonIcon = createIcon({ + displayName: 'MoonIcon', + viewBox: '0 0 22 22', + path: ( + + + + ) +}); diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts new file mode 100644 index 0000000000..9759dcea9b --- /dev/null +++ b/src/components/UI/icons/index.ts @@ -0,0 +1,6 @@ +export * from './DiscordIcon' +export * from './GitHubIcon' +export * from './HamburguerIcon'; +export * from './LensIcon'; +export * from './MoonIcon'; +export * from './TwitterIcon' diff --git a/src/components/UI/icons/index.tsx b/src/components/UI/icons/index.tsx deleted file mode 100644 index 63de6c1094..0000000000 --- a/src/components/UI/icons/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from './DiscordIcon' -export * from './GitHubIcon' -export * from './TwitterIcon' \ No newline at end of file diff --git a/src/components/UI/index.ts b/src/components/UI/index.ts new file mode 100644 index 0000000000..322eabe70a --- /dev/null +++ b/src/components/UI/index.ts @@ -0,0 +1,2 @@ +export * from './DataTable'; +export * from './Header'; diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index 9034daabfa..e83d89210a 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Link, Stack, Text } from '@chakra-ui/react'; +import { Flex, Link, Stack, Text } from '@chakra-ui/react'; import { FC } from 'react'; import NextLink from 'next/link'; diff --git a/src/components/layouts/Layout.tsx b/src/components/layouts/Layout.tsx index 5d2090fd02..b37103c187 100644 --- a/src/components/layouts/Layout.tsx +++ b/src/components/layouts/Layout.tsx @@ -1,24 +1,20 @@ +// Libraries import { Container } from '@chakra-ui/react'; import { FC } from 'react'; +// Components +import { Header } from '../UI'; import { Footer } from './Footer' interface Props { children?: React.ReactNode; } -// TODO: if mobile, getMobileLayout, else getDesktopLayout export const Layout: FC = ({ children }) => { return ( - + +
+ {children}