feat(breadcrumb): separate breadcrumb item component

Author: q3e

src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,30 @@
+import React, { ElementType } from 'react'
+import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb'
+
+interface Props {
+  as?: ElementType
+  label?: string
+  /** Defines the attributes of the children items */
+  itemProps?: {
+    as?: ElementType
+    href?: string
+    active?: boolean
+    target?: string
+    title?: string
+  }
+  /** see https://react-bootstrap.github.io/components/breadcrumb/ */
+  listProps?: {}
+  /** The children to render */
+  children?: React.ReactNode
+}
+const Breadcrumb = (props: Props) => {
+  const { as, label, listProps, children } = props
+
+  return (
+    <BootstrapBreadcrumb as={as} label={label} listProps={listProps}>
+      {children}
+    </BootstrapBreadcrumb>
+  )
+}
+
+export { Breadcrumb }

src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,21 @@
+import React, { ElementType } from 'react'
+import BootstrapBreadcrumbItem from 'react-bootstrap/BreadcrumbItem'
+
+interface Props {
+  /** Defines the attributes of the children items */
+  itemProps?: {
+    as?: ElementType
+    href?: string
+    active?: boolean
+    target?: string
+    title?: string
+  }
+  /** The children to render */
+  children?: React.ReactNode
+}
+const BreadcrumbItem = ({ children, itemProps }: Props) => (
+  // eslint-disable-next-line react/jsx-props-no-multi-spaces
+  <BootstrapBreadcrumbItem {...itemProps}>{children}</BootstrapBreadcrumbItem>
+)
+
+export { BreadcrumbItem }

src/components/Breadcrumb/index.tsx

@@ -1,30 +1,2 @@
-import React, { ElementType } from 'react'
-import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb'
-import BreadcrumbItem from 'react-bootstrap/BreadcrumbItem'
-
-interface Props {
-  as?: ElementType
-  label?: string
-  /** Defines the attributes of the children items */
-  breadcrumbItemProps?: {
-    as?: ElementType
-    href?: string
-    active?: boolean
-    target?: string
-    title?: string
-  }
-  listProps?: {}
-  /** The children to render */
-  children?: React.ReactNode
-}
-const Breadcrumb = (props: Props) => {
-  const { as, label, listProps, breadcrumbItemProps } = props
-
-  return (
-    <BootstrapBreadcrumb as={as} label={label} listProps={listProps}>
-      <BreadcrumbItem {...breadcrumbItemProps} />
-    </BootstrapBreadcrumb>
-  )
-}
-
-export { Breadcrumb }
+export * from './Breadcrumb'
+export * from './BreadcrumbItem'