Files
MemoryBear/web/src/components/TablePageLayout/index.tsx

27 lines
834 B
TypeScript

import { type FC, type ReactNode } from 'react';
import { Flex } from 'antd';
interface TablePageLayoutProps {
title: ReactNode;
extra?: ReactNode;
children: ReactNode;
}
/**
* Standard table page container with white background, title and action area.
* Used by management pages like MemberManagement, UserManagement, etc.
*/
const TablePageLayout: FC<TablePageLayoutProps> = ({ title, extra, children }) => {
return (
<div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
<Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
<div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{title}</div>
{extra && <div>{extra}</div>}
</Flex>
{children}
</div>
);
};
export default TablePageLayout;