Skip to content

Commit

Permalink
Merge pull request #20 from ethereum/header-desktop-layout
Browse files Browse the repository at this point in the history 
feat: homepage desktop layout & header component
  • Loading branch information
@corwintines
corwintines authored Oct 26, 2022
2 parents 357825b + 5e48829 commit 45cfc58
Show file tree
Hide file tree
Showing 32 changed files with 863 additions and 619 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"format:fix": "prettier . --write --config .prettierrc --ignore-path .prettierignore --loglevel warn"
},
"dependencies": {
"@chakra-ui/icons": "^2.0.11",
"@chakra-ui/react": "^2.3.2",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
Expand Down
14 changes: 7 additions & 7 deletions public/images/pages/glyph-home-light.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 42 additions & 69 deletions src/components/UI/DataTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,68 @@
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<Props> = ({
columnHeaders,
data,
}) => {
export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
return (
<TableContainer
// Note: This wont work on firefox, we are ok with this.
css={{
"&::-webkit-scrollbar": {
'&::-webkit-scrollbar': {
borderTop: '2px solid #11866f',
height: 18
},
"&::-webkit-scrollbar-thumb": {
background: "#11866f",
},
'&::-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}
{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'
>
<Text
fontFamily='"JetBrains Mono", monospace'
fontWeight={700}
fontSize='md'
color='#868b87'
>
{columnHeader}
</Text>
</Th>
)
})
}
{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>
)
})
}
{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>
)
}
);
};
113 changes: 113 additions & 0 deletions src/components/UI/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Flex
mb={4}
border='2px solid'
borderColor='brand.light.primary'
justifyContent='space-between'
>
<Stack
p={4}
justifyContent='center'
alignItems='flex-start'
borderRight={{ base: 'none', sm: '2px solid' }}
borderColor='brand.light.primary'
flexGrow={2}
>
<Text textStyle='header-font'>
go-ethereum
</Text>
</Stack>

<Flex>
{/* DOWNLOADS */}
<Stack
p={4}
justifyContent='center'
borderRight='2px solid'
borderColor='brand.light.primary'
display={{ base: 'none', md: 'block' }}
color='brand.light.primary'
_hover={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50 !important'
}}
>
<NextLink href={DOWNLOADS_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='header-font' textTransform='uppercase'>
downloads
</Text>
</Link>
</NextLink>
</Stack>

{/* DOCUMENTATION */}
<Stack
p={4}
justifyContent='center'
borderRight={{ base: 'none', md: '2px solid' }}
borderColor='brand.light.primary'
display={{ base: 'none', md: 'block' }}
color='brand.light.primary'
_hover={{
textDecoration: 'none',
bg: 'brand.light.primary',
color: 'yellow.50 !important'
}}
>
<NextLink href={DOCS_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='header-font' textTransform='uppercase'>
documentation
</Text>
</Link>
</NextLink>
</Stack>

{/* SEARCH */}
<Stack
p={4}
display={{ base: 'none', md: 'block' }}
borderRight={{ base: 'none', md: '2px solid' }}
borderColor='brand.light.primary'
>
<InputGroup>
<Input
variant='unstyled'
placeholder='search'
size='md'
_placeholder={{ color: 'brand.light.primary', fontStyle: 'italic' }}
/>

<Stack pl={4} justifyContent='center' alignItems='center'>
<LensIcon />
</Stack>
</InputGroup>
</Stack>

{/* DARK MODE SWITCH */}
<Box
p={4}
borderRight={{ base: '2px solid', lg: 'none' }}
borderColor='brand.light.primary'
>
<MoonIcon />
</Box>

{/* HAMBURGUER MENU */}
<Box p={4} display={{ base: 'block', md: 'none' }}>
<HamburguerIcon />
</Box>
</Flex>
</Flex>
);
};
Loading

0 comments on commit 45cfc58

Please sign in to comment.