张翔
1f591fe2b4
- 完善产品页面布局与交互 - 优化服务详情页用户体验 - 增强新闻模块内容展示 - 改进团队页面设计 - 优化全局样式和响应式布局 - 添加分页组件支持 - 提升性能与SEO优化 - 修复已知问题与改进代码质量
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Fragment } from 'react';
|
|
import { StaticLink } from '@/components/ui/static-link';
|
|
import { ChevronRight, Home } from 'lucide-react';
|
|
|
|
interface BreadcrumbItem {
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export function Breadcrumb({ items }: BreadcrumbProps) {
|
|
return (
|
|
<nav
|
|
aria-label="面包屑导航"
|
|
className="flex items-center text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
|
|
style={{ lineHeight: '1' }}
|
|
>
|
|
<ol className="flex items-center list-none m-0 p-0">
|
|
<li className="flex items-center">
|
|
<StaticLink
|
|
href="/"
|
|
className="hover:text-[var(--color-brand-primary)] transition-colors shrink-0"
|
|
aria-label="返回首页"
|
|
style={{ minHeight: 0, minWidth: 0 }}
|
|
>
|
|
<Home className="w-3.5 h-3.5" />
|
|
</StaticLink>
|
|
</li>
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
return (
|
|
<Fragment key={index}>
|
|
<li className="flex items-center" aria-hidden="true">
|
|
<ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-1" />
|
|
</li>
|
|
<li className="flex items-center">
|
|
{isLast ? (
|
|
<span className="text-[#1C1C1C] font-medium whitespace-nowrap" aria-current="page">
|
|
{item.label}
|
|
</span>
|
|
) : (
|
|
<StaticLink
|
|
href={item.href}
|
|
className="hover:text-[var(--color-brand-primary)] transition-colors whitespace-nowrap"
|
|
style={{ minHeight: 0, minWidth: 0 }}
|
|
>
|
|
{item.label}
|
|
</StaticLink>
|
|
)}
|
|
</li>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|