mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
c2a8beb4bd
* Stage component(for the icons in the gradient cards) * Make Scroll-hint component shared between hackathons and bank * Add hackathons to nav * layout for landing and rundown on hacakthons page
41 lines
1 KiB
JavaScript
41 lines
1 KiB
JavaScript
import { Box, Heading, Text } from 'theme-ui'
|
|
import Icon from '../components/icon'
|
|
|
|
const Stage = ({ icon, color, name, desc, children, ...props }) => (
|
|
<Box {...props}>
|
|
{children || (
|
|
<Box
|
|
as="span"
|
|
sx={{
|
|
width: 'fit-content',
|
|
bg: color,
|
|
borderRadius: 18,
|
|
lineHeight: 0,
|
|
p: 2,
|
|
mb: 1,
|
|
display: 'inline-block',
|
|
transform: ['scale(0.75)', 'none'],
|
|
transformOrigin: 'bottom left',
|
|
boxShadow:
|
|
'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
|
|
}}
|
|
>
|
|
<Icon glyph={icon} size={48} />
|
|
</Box>
|
|
)}
|
|
<Box>
|
|
<Heading as="h3" variant="headline" mb={2}>
|
|
{name}
|
|
</Heading>
|
|
<Text
|
|
as="p"
|
|
variant="subtitle"
|
|
sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
|
|
>
|
|
{desc}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
|
|
export default Stage
|