33 lines
870 B
TypeScript
33 lines
870 B
TypeScript
|
import { FloatingContainer, RowButton } from 'components/shared'
|
||
|
|
import { motion } from 'framer-motion'
|
||
|
|
import { memo } from 'react'
|
||
|
|
import state, { useSelector } from 'state'
|
||
|
|
import styled from 'styles'
|
||
|
|
|
||
|
|
function BackToContent() {
|
||
|
|
const shouldDisplay = useSelector((s) => {
|
||
|
|
const { currentShapes, shapesToRender } = s.values
|
||
|
|
return currentShapes.length > 0 && shapesToRender.length === 0
|
||
|
|
})
|
||
|
|
|
||
|
|
if (!shouldDisplay) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<BackToContentButton initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
|
||
|
|
<RowButton onClick={() => state.send('ZOOMED_TO_CONTENT')}>
|
||
|
|
Back to content
|
||
|
|
</RowButton>
|
||
|
|
</BackToContentButton>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default memo(BackToContent)
|
||
|
|
|
||
|
|
const BackToContentButton = styled(motion(FloatingContainer), {
|
||
|
|
pointerEvents: 'all',
|
||
|
|
width: 'fit-content',
|
||
|
|
gridRow: 1,
|
||
|
|
flexGrow: 2,
|
||
|
|
display: 'block',
|
||
|
|
})
|