71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { HStack, SpanBox, VStack } from './LayoutPrimitives'
|
|
import { StyledText } from './StyledText'
|
|
import { NewspaperClipping } from 'phosphor-react'
|
|
import { theme } from '../tokens/stitches.config'
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export function Discover(): JSX.Element {
|
|
const [isUsed, setIsUsed] = useState(false)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
setIsUsed(window.location.pathname.includes('/discover'))
|
|
}, [])
|
|
|
|
return (
|
|
<VStack
|
|
css={{
|
|
m: '0px',
|
|
width: '100%',
|
|
borderBottom: '1px solid $thBorderColor',
|
|
px: '15px',
|
|
background: isUsed ? '$thLibrarySelectionColor' : 'none',
|
|
'&:hover': {
|
|
background: '$thLibrarySelectionColor',
|
|
cursor: 'pointer',
|
|
},
|
|
}}
|
|
onClick={() => {
|
|
router.push('/discover')
|
|
}}
|
|
alignment="start"
|
|
distribution="start"
|
|
>
|
|
<HStack css={{ width: '100%' }} distribution="start" alignment="center">
|
|
<StyledText
|
|
css={{
|
|
fontFamily: '$inter',
|
|
fontWeight: '600',
|
|
fontSize: '16px',
|
|
lineHeight: '125%',
|
|
color: '$thLibraryMenuPrimary',
|
|
pl: '10px',
|
|
pb: '10px',
|
|
mt: '20px',
|
|
mb: '10px',
|
|
}}
|
|
>
|
|
Discover
|
|
</StyledText>
|
|
<SpanBox
|
|
css={{
|
|
display: 'flex',
|
|
height: '100%',
|
|
mt: '0px',
|
|
marginLeft: 'auto',
|
|
position: 'relative',
|
|
left: '-5px',
|
|
verticalAlign: 'middle',
|
|
}}
|
|
>
|
|
<NewspaperClipping
|
|
size={15}
|
|
color={theme.colors.thLibraryMenuPrimary.toString()}
|
|
/>
|
|
</SpanBox>
|
|
</HStack>
|
|
</VStack>
|
|
)
|
|
}
|