39 lines
981 B
TypeScript
39 lines
981 B
TypeScript
|
import React from 'react'
|
||
|
|
import { Flex } from '@chakra-ui/react'
|
||
|
|
|
||
|
|
export const Hamburger = props => {
|
||
|
|
const lineCount = [1, 2, 3]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex
|
||
|
|
{...props}
|
||
|
|
flexDirection={'column'}
|
||
|
|
justifyContent={'center'}
|
||
|
|
alignItems={'center'}
|
||
|
|
cursor={'pointer'}
|
||
|
|
>
|
||
|
|
{lineCount.map((line, idx) => {
|
||
|
|
return (
|
||
|
|
<Flex
|
||
|
|
key={idx}
|
||
|
|
w='40px'
|
||
|
|
mb='10px'
|
||
|
|
h='3px'
|
||
|
|
bg='linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a);'
|
||
|
|
backgroundSize='200%'
|
||
|
|
borderRadius={'9px'}
|
||
|
|
sx={{
|
||
|
|
'@keyframes moving-rainbow': {
|
||
|
|
'0%': { backgroundPosition: '0 0' },
|
||
|
|
'100%': { backgroundPosition: '200% 0' }
|
||
|
|
},
|
||
|
|
// add delay
|
||
|
|
animation: `moving-rainbow 3s infinite linear -${idx * 0.3}s}`
|
||
|
|
}}
|
||
|
|
></Flex>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|