status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: link with arrows clickable and reduced

This commit is contained in:
RadoslavDimchev 2023-08-30 16:24:39 +03:00
parent a841459eee
commit 1282d3ed69
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/General/LinkWithArrow.tsx
View File

@ -1,6 +1,5 @@
import { Text } from '@status-im/components' import { Link, useNavigate } from 'react-router-dom'
import { Link } from 'react-router-dom' import { XStack } from 'tamagui'
import { Stack, XStack } from 'tamagui'
import { ArrowLeftIcon, ArrowRightIcon } from '@status-im/icons' import { ArrowLeftIcon, ArrowRightIcon } from '@status-im/icons'
type LinkWithArrowProps = { type LinkWithArrowProps = {
@ -12,18 +11,29 @@ type LinkWithArrowProps = {
} }
const LinkWithArrow = ({ text, to, arrowLeft, arrowRight, style }: LinkWithArrowProps) => { const LinkWithArrow = ({ text, to, arrowLeft, arrowRight, style }: LinkWithArrowProps) => {
const navigate = useNavigate()
const navigateHandler = () => {
navigate(to)
}
return ( return (
<Stack style={{ maxWidth: 'fit-content', ...style }}> <XStack
<Text size={15}> space={'$1.5'}
<XStack space={'$1'} style={{ alignItems: 'center' }}> style={{
{arrowLeft && <ArrowLeftIcon size={16} color="#2A4CF4" />} alignItems: 'center',
<Link style={{ color: '#2A4CF4' }} to={to}> maxWidth: 'fit-content',
cursor: 'pointer',
...style,
}}
onClick={navigateHandler}
>
{arrowLeft && <ArrowLeftIcon size={20} color="#2A4CF4" />}
<Link style={{ color: '#2A4CF4', marginBottom: '2px' }} to={to}>
{text} {text}
</Link> </Link>
{arrowRight && <ArrowRightIcon size={16} color="#2A4CF4" />} {arrowRight && <ArrowRightIcon size={20} color="#2A4CF4" />}
</XStack> </XStack>
</Text>
</Stack>
) )
} }