39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { Typography, Button } from "antd";
|
||
|
|
import { AcademicCapIcon, 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 mb-3">
|
||
|
|
{/* 左侧部分 */}
|
||
|
|
<div className="flex items-center">
|
||
|
|
<Title
|
||
|
|
level={4}
|
||
|
|
style={{ marginBottom: 0, color: "#1F2937", fontSize: "16px" }}>
|
||
|
|
{Header}
|
||
|
|
</Title>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 右侧部分 */}
|
||
|
|
{showButton && (
|
||
|
|
<Button
|
||
|
|
color="default"
|
||
|
|
variant="link"
|
||
|
|
style={{ gap: 4 }}
|
||
|
|
onClick={onClick}>
|
||
|
|
<span className="text-sm">更多</span>
|
||
|
|
<ChevronRightIcon className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
};
|