page-assist/src/components/Common/DataNavigation.tsx
zhaoweijie e640b1254d refactor(components): 重构 playground组件
- 移除 Data、Scene 和 IodRelevant 组件中的 Drawer
- 优化 Data、Scene 和 IodRelevant 组件的结构
- 添加 Header 组件用于展示标题和关闭按钮
- 使用 Main 组件替代原来的 ShowCard 组件
- 调整样式和布局,提高组件的可复用性和可维护性
2025-08-23 17:03:14 +08:00

42 lines
1.1 KiB
TypeScript

import React from "react"
import { Typography } from "antd"
import { ChevronRightIcon } from "@heroicons/react/24/outline"
const { Title } = Typography
type Props = {
Header: React.ReactNode
showButton?: boolean
onClick?: () => void
}
export const DataNavigation: React.FC<Props> = ({
Header,
showButton = true,
onClick
}) => {
return (
<div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg">
{/* 左侧部分 */}
<div className="flex items-center">
<Title
level={3}
className="flex items-center"
style={{ marginBottom: 0, color: "#1F2937", fontSize: "18px" }}>
{Header}
</Title>
</div>
{/* 右侧部分 */}
{showButton && (
<div
className="flex items-center text-[#3a3a3a] cursor-pointer space-x-0.5 hover:text-[#3581e3] transition-colors duration-200"
onClick={onClick}>
<span className="text-[12px]"></span>
<ChevronRightIcon className="w-4 h-4" />
</div>
)}
</div>
)
}