-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1e0a0a3
commit 0d2980b
Showing
8 changed files
with
513 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { ChevronRight, Ellipsis } from 'lucide-react'; | ||
| import { forwardRef } from 'react'; | ||
| import { cn } from 'lib/tailwind'; | ||
|
|
||
| const Breadcrumb = forwardRef< | ||
| HTMLElement, | ||
| React.ComponentPropsWithoutRef<'nav'> & { | ||
| separator?: React.ReactNode; | ||
| } | ||
| >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />); | ||
| Breadcrumb.displayName = 'Breadcrumb'; | ||
|
|
||
| const BreadcrumbList = forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <ol | ||
| ref={ref} | ||
| className={cn( | ||
| 'flex flex-wrap items-center gap-1.5 break-words text-sm font-medium text-foreground-secondary sm:gap-2.5', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| ); | ||
| BreadcrumbList.displayName = 'BreadcrumbList'; | ||
|
|
||
| const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} /> | ||
| ) | ||
| ); | ||
| BreadcrumbItem.displayName = 'BreadcrumbItem'; | ||
|
|
||
| const BreadcrumbLink = forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <a ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} /> | ||
| ) | ||
| ); | ||
| BreadcrumbLink.displayName = 'BreadcrumbLink'; | ||
|
|
||
| const BreadcrumbPage = forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <span | ||
| ref={ref} | ||
| role="link" | ||
| aria-disabled="true" | ||
| aria-current="page" | ||
| className={cn('text-foreground', className)} | ||
| {...props} | ||
| /> | ||
| ) | ||
| ); | ||
| BreadcrumbPage.displayName = 'BreadcrumbPage'; | ||
|
|
||
| const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => ( | ||
| <li role="presentation" aria-hidden="true" className={cn(className)} {...props}> | ||
| {children ?? <ChevronRight className="size-3.5 text-icon-soft" />} | ||
| </li> | ||
| ); | ||
| BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'; | ||
|
|
||
| const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => ( | ||
| <span | ||
| role="presentation" | ||
| aria-hidden="true" | ||
| className={cn('flex size-9 items-center justify-center', className)} | ||
| {...props} | ||
| > | ||
| <Ellipsis className="size-4 text-icon-soft" /> | ||
| <span className="sr-only">{'More'}</span> | ||
| </span> | ||
| ); | ||
| BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'; | ||
|
|
||
| export { | ||
| Breadcrumb, | ||
| BreadcrumbList, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbPage, | ||
| BreadcrumbSeparator, | ||
| BreadcrumbEllipsis | ||
| }; |
25 changes: 25 additions & 0 deletions
25
src/components/foundations/Breadcrumb/examples/WithBadge.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { PlusCircle } from 'lucide-react'; | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbList, | ||
| BreadcrumbSeparator | ||
| } from '../Breadcrumb'; | ||
|
|
||
| export function WithBadge() { | ||
| return ( | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/journeys">Journeys</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/journeys/new">New journey</BreadcrumbLink> | ||
| <PlusCircle size={14} /> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| ); | ||
| } |
33 changes: 33 additions & 0 deletions
33
src/components/foundations/Breadcrumb/examples/WithEllipsis.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbEllipsis, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbList, | ||
| BreadcrumbPage, | ||
| BreadcrumbSeparator | ||
| } from '../Breadcrumb'; | ||
|
|
||
| export function WithEllipsis() { | ||
| return ( | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/">Home</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbEllipsis /> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/contacts">Contacts</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage>Laptops</BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './Breadcrumb'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbSeparator, | ||
| BreadcrumbPage, | ||
| BreadcrumbList | ||
| } from 'components/foundations/Breadcrumb'; | ||
| import { PreviewBox } from 'components/PreviewBox'; | ||
| import { FileCode } from 'components/FileCode'; | ||
| import { ComponentPreview } from 'components/ComponentPreview'; | ||
|
|
||
| # Breadcrumb | ||
|
|
||
| A breadcrumb navigation component that helps users understand their current location within a hierarchical structure. | ||
|
|
||
| <PreviewBox> | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/">Home</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/contacts">Contacts</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage>Laptops</BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| </PreviewBox> | ||
|
|
||
| ## Install | ||
|
|
||
| Install the Breadcrumb component and its dependencies in your project. | ||
|
|
||
| <FileCode path="components/foundations/Breadcrumb" /> | ||
|
|
||
| ### Dependencies | ||
|
|
||
| The Breadcrumb component requires the following dependency: | ||
|
|
||
| ```bash copy | ||
| npm install lucide-react | ||
| ``` | ||
|
|
||
| ## API Reference | ||
|
|
||
| ### BreadcrumbLink | ||
|
|
||
| The BreadcrumbLink component is used for clickable navigation items in the breadcrumb. | ||
|
|
||
| | Prop | Type | Default Value | | ||
| | :----- | :------: | ------------: | | ||
| | `href` | `string` | - | | ||
|
|
||
| ## Usage | ||
|
|
||
| Import all necessary components to build your breadcrumb navigation: | ||
|
|
||
| ```tsx copy | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbSeparator, | ||
| BreadcrumbPage, | ||
| BreadcrumbList | ||
| } from '[path]/Breadcrumb'; | ||
| ``` | ||
|
|
||
| Basic example of a breadcrumb navigation: | ||
|
|
||
| ```tsx copy | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/">Home</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/products">Products</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Breadcrumb with Ellipsis | ||
|
|
||
| Use this pattern when you need to display long navigation paths. The ellipsis helps maintain a compact layout while showing the full path context. | ||
|
|
||
| <ComponentPreview path="components/foundations/Breadcrumb/examples/WithEllipsis" /> | ||
|
|
||
| ### Breadcrumb with Badge | ||
|
|
||
| Enhance your breadcrumb navigation with badges to display additional information or status indicators. | ||
|
|
||
| <ComponentPreview path="components/foundations/Breadcrumb/examples/WithBadge" /> |