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(breadcrumb): use tamagui XStack

This commit is contained in:
RadoslavDimchev 2024-04-25 20:32:24 +03:00 committed by Emil Ivanichkov
parent 2e22c2ee1a
commit b65bf26127
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,29 +2,25 @@ import { Text } from '@status-im/components'
import { ChevronRightIcon } from '@status-im/icons' import { ChevronRightIcon } from '@status-im/icons'
import { XStack } from 'tamagui' import { XStack } from 'tamagui'
import './Breadcrumb.css'
type BreadcrumbBarProps = { type BreadcrumbBarProps = {
breadcrumbList: string[] breadcrumbList: string[]
} }
const Breadcrumb = ({ breadcrumbList }: BreadcrumbBarProps) => { const Breadcrumb = ({ breadcrumbList }: BreadcrumbBarProps) => {
return ( return (
<nav className="breadcrumb-bar-nav"> <XStack space={'$2'} alignItems="center">
<ul className="breadcrumb-bar-ul"> {breadcrumbList.map((item, index) => {
{breadcrumbList.map((item, index) => { const isNotLast = index !== breadcrumbList.length - 1
const isNotLast = index !== breadcrumbList.length - 1 return (
return ( <XStack space={'$2'} alignItems="center" key={index}>
<XStack space={'$2'} alignItems="center" key={index}> <Text size={15} color={isNotLast ? '#647084' : ''}>
<Text size={15} color={isNotLast ? '#647084' : ''}> {item}
{item} </Text>
</Text> {isNotLast && <ChevronRightIcon size={20} color="#647084" />}
{isNotLast && <ChevronRightIcon size={20} color="#647084" />} </XStack>
</XStack> )
) })}
})} </XStack>
</ul>
</nav>
) )
} }