feat(breadcrumb): separate to container and element components

src/components/General/Breadcrumb/Breadcrumb.tsx

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

src/components/General/Breadcrumb/BreadcrumbElement.tsx

@@ -0,0 +1,26 @@
+import { Text } from '@status-im/components'
+import { ChevronRightIcon } from '@status-im/icons'
+import { XStack } from 'tamagui'
+
+type BreadcrumbElementProps = {
+  element: string
+  isLastElement: boolean
+}
+
+const BreadcrumbElement = ({
+  element,
+  isLastElement,
+}: BreadcrumbElementProps) => {
+  return (
+    <XStack space={'$2'} alignItems="center">
+      <Text size={15} color={isLastElement ? '' : '#647084'}>
+        {element}
+      </Text>
+      {isLastElement === false && (
+        <ChevronRightIcon size={20} color="#647084" />
+      )}
+    </XStack>
+  )
+}
+
+export default BreadcrumbElement