Skip to content

Commit

Permalink
Refactoring Breadcrumbs component
Browse files Browse the repository at this point in the history
  • Loading branch information
corbanbrook committed Nov 28, 2023
1 parent 88b05b7 commit 362ad5f
Showing 1 changed file with 45 additions and 21 deletions.
66 changes: 45 additions & 21 deletions src/components/Breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Box, BoxProps } from '~/components/Box'
import { Divider } from '~/components/Divider'
import { Text } from '~/components/Text'

type Path = {
interface Path {
label: string
url?: string
}
Expand All @@ -12,30 +12,54 @@ type BreadcrumbsProps = BoxProps & {
paths: Path[]
}

export const Breadcrumbs = ({
excludeDivider = false,
paths,
...props
}: BreadcrumbsProps) => {
const lastPath = paths.slice(-1)[0]
const restPaths = paths.slice(0, -1)
export const Breadcrumbs = (props: BreadcrumbsProps) => {
const { paths, excludeDivider = false, ...rest } = props

return (
<Box {...props}>
<Text as="p" variant="small" fontWeight="medium" color="text50">
{restPaths.map(({ label, url }, key) => (
<Box as="a" href={url} key={key}>
{label}
{' / '}
</Box>
))}

<Text as="a" color="text100">
{lastPath.label}
</Text>
</Text>
<Box {...rest}>
{paths.map((path, idx) => (
<BreadcrumbSegment
key={idx}
path={path}
active={idx === paths.length - 1}
/>
))}

{!excludeDivider && <Divider />}
</Box>
)
}

interface BreadcrumbSegmentProps {
path: Path
active?: boolean
}

const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
const { path, active } = props

return active ? (
<Text
variant="small"
fontWeight="medium"
color="text100"
whiteSpace="nowrap"
capitalize
>
{path.label}
</Text>
) : (
<Text
as="a"
href={path.url}
variant="small"
fontWeight="medium"
color="text50"
whiteSpace="nowrap"
capitalize
>
{path.label}
{' / '}
</Text>
)
}

0 comments on commit 362ad5f

Please sign in to comment.