status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-03-03 12:30:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(breadcrumb-element): add new component

Browse Source
This commit is contained in:
RadoslavDimchev 2024-04-26 22:16:20 +03:00 committed by Emil Ivanichkov
parent bbeedacc4d
commit eb847edaef
2 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/General/Breadcrumb/Breadcrumb.tsx
View File

@ -1,4 +1,3 @@
import { NavLink } from 'react-router-dom'
import { XStack } from 'tamagui'
import useBreadcrumbs, { BreadcrumbsRoute } from 'use-react-router-breadcrumbs'
import {
@ -6,6 +5,7 @@ import {
VALIDATOR_ONBOARDING_SUB_PATHS,
MANAGE_VALIDATOR_SUB_PATHS,
} from '../../../constants'
import BreadcrumbElement from './BreadcrumbElement'
const routes = [
{ path: PATHS.LANDING },
@ -56,25 +56,13 @@ const Breadcrumb = () => {
return (
<XStack space={'$2'} alignItems="center">
{breadcrumbs.map(({ match, breadcrumb }) => {
if (match.pathname === `${PATHS.MANAGE_VALIDATOR}`) {
return
}
return (
<NavLink
key={match.pathname}
to={match.pathname}
style={{
textDecoration: 'none',
color: '#647084',
fontWeight: 'normal',
}}
>
{breadcrumb}
</NavLink>
)
})}
{breadcrumbs.map(({ match, breadcrumb }, index) => (
<BreadcrumbElement
match={match}
breadcrumb={breadcrumb}
isLastElement={index === breadcrumbs.length - 1}
/>
))}
</XStack>
)
}

32
src/components/General/Breadcrumb/BreadcrumbElement.tsx
View File

@ -1,25 +1,37 @@
import { Text } from '@status-im/components'
import { NavLink } from 'react-router-dom'
import { XStack } from 'tamagui'
import { ChevronRightIcon } from '@status-im/icons'
import { Stack, XStack } from 'tamagui'
import { PATHS } from '../../../constants'
type BreadcrumbElementProps = {
element: string
match: any
breadcrumb: any
isLastElement: boolean
}
const BreadcrumbElement = ({
element,
match,
breadcrumb,
isLastElement,
}: BreadcrumbElementProps) => {
const onClickBreadcrumbElement = () => {}
if (match.pathname === `${PATHS.MANAGE_VALIDATOR}`) {
return
}
return (
<XStack space={'$2'} alignItems="center">
<Stack onPress={onClickBreadcrumbElement} style={{ cursor: 'pointer' }}>
<Text size={15} color={isLastElement ? '' : '#647084'}>
{element}
</Text>
</Stack>
<NavLink
key={match.pathname}
to={match.pathname}
style={{
textDecoration: 'none',
color: '#647084',
fontWeight: 'normal',
}}
>
{breadcrumb}
</NavLink>
{isLastElement === false && (
<ChevronRightIcon size={20} color="#647084" />
)}