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 to Antd's expected format
43+ // Convert custom items format to the standard format used throughout the application
2144 const breadcrumbItems = items . map ( item => ( {
2245 key : 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
5050 return (
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
0 commit comments