retro-react
Version:
A React component library for building retro-style websites
102 lines (101 loc) • 2.57 kB
TypeScript
import React from 'react';
import { ThemeUICSSObject } from 'theme-ui';
export interface BreadcrumbItem {
/**
* The text of the breadcrumb.
*
* @default ''
*/
text: string;
/**
* The href of the breadcrumb.
*
* @default ''
*/
href?: string;
/**
* The onClick of the breadcrumb.
*
* @default undefined
*/
onClick?: (e: React.MouseEvent) => void;
/**
* Is the breadcrumb active?
*
* @default false
*/
active?: boolean;
/**
* Icon to display before the text (optional).
*
* @default undefined
*/
icon?: React.ReactNode;
/**
* Whether this item should be disabled.
*
* @default false
*/
disabled?: boolean;
}
export interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCopy'> {
/**
* The items of the breadcrumb.
*
* @default []
*
* @example
* <Breadcrumbs items={[{ text: 'Home', href: '/', icon: '🏠' }, { text: 'About', href: '/about', active: true }]} />
*/
items?: BreadcrumbItem[];
/**
* Maximum number of visible items before truncation.
*
* @default undefined
*/
maxItems?: number;
/**
* Style of separator between breadcrumbs.
*
* @default 'arrow'
*/
separator?: 'arrow' | 'backslash' | 'dot' | 'pipe';
/**
* Whether to show a copy path button.
*
* @default false
*/
showCopyButton?: boolean;
/**
* Callback when path is copied.
*
* @default undefined
*/
onCopy?: (path: string) => void;
sx?: ThemeUICSSObject;
}
/**
* Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.
* Features authentic retro styling with WIN31-inspired borders and typography.
*
* Enhanced with:
* - Icons support for visual hierarchy
* - Truncation for long paths
* - Copy path functionality
* - Multiple separator styles
* - Keyboard navigation
* - Better accessibility
*
* @example
* <Breadcrumbs
* items={[
* { text: 'Home', href: '/', icon: '🏠' },
* { text: 'Documents', href: '/docs', icon: '📁' },
* { text: 'Projects', active: true, icon: '📂' }
* ]}
* separator="arrow"
* showCopyButton
* maxItems={4}
* />
*/
export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLDivElement>>;