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 { XStack } from 'tamagui'
import useBreadcrumbs, { BreadcrumbsRoute } from 'use-react-router-breadcrumbs' import useBreadcrumbs, { BreadcrumbsRoute } from 'use-react-router-breadcrumbs'
import { import {
@ -6,6 +5,7 @@ import {
VALIDATOR_ONBOARDING_SUB_PATHS, VALIDATOR_ONBOARDING_SUB_PATHS,
MANAGE_VALIDATOR_SUB_PATHS, MANAGE_VALIDATOR_SUB_PATHS,
} from '../../../constants' } from '../../../constants'
import BreadcrumbElement from './BreadcrumbElement'
const routes = [ const routes = [
{ path: PATHS.LANDING }, { path: PATHS.LANDING },
@ -56,25 +56,13 @@ const Breadcrumb = () => {
return ( return (
<XStack space={'$2'} alignItems="center"> <XStack space={'$2'} alignItems="center">
{breadcrumbs.map(({ match, breadcrumb }) => { {breadcrumbs.map(({ match, breadcrumb }, index) => (
if (match.pathname === `${PATHS.MANAGE_VALIDATOR}`) { <BreadcrumbElement
return match={match}
} breadcrumb={breadcrumb}
isLastElement={index === breadcrumbs.length - 1}
return ( />
<NavLink ))}
key={match.pathname}
to={match.pathname}
style={{
textDecoration: 'none',
color: '#647084',
fontWeight: 'normal',
}}
>
{breadcrumb}
</NavLink>
)
})}
</XStack> </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 { ChevronRightIcon } from '@status-im/icons'
import { Stack, XStack } from 'tamagui'
import { PATHS } from '../../../constants'
type BreadcrumbElementProps = { type BreadcrumbElementProps = {
element: string match: any
breadcrumb: any
isLastElement: boolean isLastElement: boolean
} }
const BreadcrumbElement = ({ const BreadcrumbElement = ({
element, match,
breadcrumb,
isLastElement, isLastElement,
}: BreadcrumbElementProps) => { }: BreadcrumbElementProps) => {
const onClickBreadcrumbElement = () => {} if (match.pathname === `${PATHS.MANAGE_VALIDATOR}`) {
return
}
return ( return (
<XStack space={'$2'} alignItems="center"> <XStack space={'$2'} alignItems="center">
<Stack onPress={onClickBreadcrumbElement} style={{ cursor: 'pointer' }}> <NavLink
<Text size={15} color={isLastElement ? '' : '#647084'}> key={match.pathname}
{element} to={match.pathname}
</Text> style={{
</Stack> textDecoration: 'none',
color: '#647084',
fontWeight: 'normal',
}}
>
{breadcrumb}
</NavLink>
{isLastElement === false && ( {isLastElement === false && (
<ChevronRightIcon size={20} color="#647084" /> <ChevronRightIcon size={20} color="#647084" />
)} )}