29 lines
996 B
TypeScript
29 lines
996 B
TypeScript
import { CaretDownOutlined, CaretRightOutlined } from "@ant-design/icons";
|
|
import { Typography } from "antd";
|
|
import { type ReactNode, useState } from "react";
|
|
|
|
interface MaterialGroupProps {
|
|
children: ReactNode;
|
|
count: number;
|
|
label: string;
|
|
}
|
|
|
|
export function MaterialGroup({ children, count, label }: MaterialGroupProps) {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
return (
|
|
<div className="app-inbox-group">
|
|
<div className="app-inbox-group-header" onClick={() => setCollapsed(!collapsed)}>
|
|
<span className="app-inbox-group-arrow">{collapsed ? <CaretRightOutlined /> : <CaretDownOutlined />}</span>
|
|
<Typography.Text className="app-inbox-group-label" type="secondary">
|
|
{label}
|
|
</Typography.Text>
|
|
<Typography.Text className="app-inbox-group-count" type="secondary">
|
|
({count})
|
|
</Typography.Text>
|
|
</div>
|
|
{!collapsed && <div className="app-inbox-group-content">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|