feat: create Link with arrow component to reuse
This commit is contained in:
parent
64a68a5b61
commit
b530558e96
|
@ -0,0 +1,29 @@
|
|||
import { Text } from '@status-im/components'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Stack, XStack } from 'tamagui'
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@status-im/icons'
|
||||
|
||||
type LinkWithArrowProps = {
|
||||
text: string
|
||||
to: string
|
||||
arrowLeft?: boolean
|
||||
arrowRight?: boolean
|
||||
}
|
||||
|
||||
const LinkWithArrow = ({ text, to, arrowLeft, arrowRight }: LinkWithArrowProps) => {
|
||||
return (
|
||||
<Stack style={{ margin: '2% 0 4%', maxWidth: 'fit-content' }}>
|
||||
<Text size={15}>
|
||||
<XStack space={'$1'} style={{ alignItems: 'center' }}>
|
||||
{arrowLeft && <ArrowLeftIcon size={16} color="#2A4CF4" />}
|
||||
<Link style={{ color: '#2A4CF4' }} to={to}>
|
||||
{text}
|
||||
</Link>
|
||||
{arrowRight && <ArrowRightIcon size={16} color="#2A4CF4" />}
|
||||
</XStack>
|
||||
</Text>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
export default LinkWithArrow
|
Loading…
Reference in New Issue