From 51e2a54c39ff2b6ba20d2d9945d2a0b3d3c438a5 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 30 May 2025 16:38:57 +0500 Subject: [PATCH] Update Environments Breadcrumbs --- .../components/ModernBreadcrumbs.tsx | 90 +++++++++---------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx index 0403be24b..f303831ec 100644 --- a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx +++ b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx @@ -1,6 +1,8 @@ import React, { ReactNode } from 'react'; -import { Breadcrumb } from 'antd'; +import { default as AntdBreadcrumb } from 'antd/es/breadcrumb'; import { BreadcrumbProps } from 'antd/lib/breadcrumb'; +import styled from 'styled-components'; +import { ArrowIcon } from 'lowcoder-design'; interface ModernBreadcrumbsProps extends Omit { /** @@ -13,57 +15,53 @@ interface ModernBreadcrumbsProps extends Omit { }[]; } -/** - * Modern styled breadcrumb component with consistent styling - */ +const Breadcrumb = styled(AntdBreadcrumb)` + font-size: 16px; + margin-bottom: 10px; + + li:not(:last-child) { + color: #8b8fa3; + } + + li:last-child { + font-weight: 500; + color: #222222; + } + + li.ant-breadcrumb-separator { + display: flex; + flex-direction: column; + justify-content: center; + } +`; + +const BreadcrumbItem = styled.div` + cursor: pointer; +`; + + const ModernBreadcrumbs: React.FC = ({ items = [], ...props }) => { - // Convert custom items format to Antd's expected format + // Convert custom items format to the standard format used throughout the application const breadcrumbItems = items.map(item => ({ key: item.key, - title: item.onClick ? ( - { - e.currentTarget.style.color = '#096dd9'; - e.currentTarget.style.textDecoration = 'underline'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.color = '#1890ff'; - e.currentTarget.style.textDecoration = 'none'; - }} - > - {item.title} - - ) : ( - - {item.title} - - ) + title: item.title, + onClick: item.onClick })); return ( -

- /} - items={breadcrumbItems} - /> -

+ } + items={breadcrumbItems} + itemRender={(item) => ( + + {item.title} + + )} + /> ); }; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: