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,57 +15,53 @@ 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+ font-size: 16px;
20+ margin-bottom: 10px;
21+
22+ li:not(:last-child) {
23+ color: #8b8fa3;
24+ }
25+
26+ li:last-child {
27+ font-weight: 500;
28+ color: #222222;
29+ }
30+
31+ li.ant-breadcrumb-separator {
32+ display: flex;
33+ flex-direction: column;
34+ justify-content: center;
35+ }
36+ ` ;
37+
38+ const BreadcrumbItem = styled . div `
39+ cursor: pointer;
40+ ` ;
41+
42+
1943const ModernBreadcrumbs :React . FC < ModernBreadcrumbsProps > = ( { items= [ ] , ...props } ) => {
20- // Convert custom items format toAntd's expected format
44+ // Convert custom items format tothe standard format used throughout the application
2145const breadcrumbItems = items . map ( item => ( {
2246key :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- )
47+ title :item . title ,
48+ onClick :item . onClick
4849} ) ) ;
4950
5051return (
51- < div className = "modern-breadcrumb" style = { {
52- background :'#f5f5f5' ,
53- padding :'12px 20px' ,
54- borderRadius :'4px' ,
55- marginBottom :'20px' ,
56- border :'1px solid #e8e8e8' ,
57- boxShadow :'0 1px 2px rgba(0,0,0,0.04)' ,
58- display :'flex' ,
59- alignItems :'center'
60- } } >
61- < Breadcrumb
62- { ...props }
63- separator = { < span style = { { color :'#8b8fa3' } } > /</ span > }
64- items = { breadcrumbItems }
65- />
66- </ div >
52+ < Breadcrumb
53+ { ...props }
54+ separator = { < ArrowIcon /> }
55+ items = { breadcrumbItems }
56+ itemRender = { ( item ) => (
57+ < BreadcrumbItem
58+ key = { item . key }
59+ onClick = { item . onClick }
60+ >
61+ { item . title }
62+ </ BreadcrumbItem >
63+ ) }
64+ />
6765) ;
6866} ;
6967