11import React , { ReactNode } from 'react' ;
2- import { Breadcrumb } from 'antd' ;
2+ import { default as AntdBreadcrumb } from 'antd/es/breadcrumb ' ;
33import { BreadcrumbProps } from 'antd/lib/breadcrumb' ;
4+ import styled from 'styled-components' ;
5+ import { ArrowIcon } from 'lowcoder-design' ;
46
57interface ModernBreadcrumbsProps extends Omit < BreadcrumbProps , 'items' > {
68/**
@@ -13,56 +15,52 @@ interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
1315} [ ] ;
1416}
1517
16- /**
17- * Modern styled breadcrumb component with consistent styling
18- */
18+ const Breadcrumb = styled ( AntdBreadcrumb ) `
19+ margin-bottom: 10px;
20+ font-size: 20px;
21+ li:not(:last-child) {
22+ color: #8b8fa3;
23+ }
24+
25+ li:last-child {
26+ font-weight: 500;
27+ color: #222222;
28+ }
29+
30+ li.ant-breadcrumb-separator {
31+ display: flex;
32+ flex-direction: column;
33+ justify-content: center;
34+ }
35+ ` ;
36+
37+ const BreadcrumbItem = styled . div `
38+ cursor: pointer;
39+ ` ;
40+
41+
1942const ModernBreadcrumbs :React . FC < ModernBreadcrumbsProps > = ( { items= [ ] , ...props } ) => {
20- // Convert custom items format toAntd's expected format
43+ // Convert custom items format tothe standard format used throughout the application
2144const breadcrumbItems = items . map ( item => ( {
2245key :item . key ,
23- title :item . onClick ?(
24- < span
25- style = { {
26- cursor :"pointer" ,
27- color :'#1890ff' ,
28- fontWeight :'500' ,
29- transition :'color 0.2s ease'
30- } }
31- onClick = { item . onClick }
32- onMouseEnter = { ( e ) => {
33- e . currentTarget . style . color = '#096dd9' ;
34- e . currentTarget . style . textDecoration = 'underline' ;
35- } }
36- onMouseLeave = { ( e ) => {
37- e . currentTarget . style . color = '#1890ff' ;
38- e . currentTarget . style . textDecoration = 'none' ;
39- } }
40- >
41- { item . title }
42- </ span >
43- ) :(
44- < span style = { { color :'#222222' , fontWeight :'500' } } >
45- { item . title }
46- </ span >
47- )
46+ title :item . title ,
47+ onClick :item . onClick
4848} ) ) ;
4949
5050return (
51- < div className = "modern-breadcrumb" style = { {
52- background :'#ffffff' ,
53- padding :'12px 20px' ,
54- borderRadius :'4px' ,
55- marginBottom :'20px' ,
56- border :'1px solid #e8e8e8' ,
57- display :'flex' ,
58- alignItems :'center'
59- } } >
60- < Breadcrumb
61- { ...props }
62- separator = { < span style = { { color :'#8b8fa3' } } > /</ span > }
63- items = { breadcrumbItems }
64- />
65- </ div >
51+ < Breadcrumb
52+ { ...props }
53+ separator = { < ArrowIcon /> }
54+ items = { breadcrumbItems }
55+ itemRender = { ( item ) => (
56+ < BreadcrumbItem
57+ key = { item . key }
58+ onClick = { item . onClick }
59+ >
60+ { item . title }
61+ </ BreadcrumbItem >
62+ ) }
63+ />
6664) ;
6765} ;
6866