mint/dashboard/src/components/corpus/PaliChapterCard.tsx

import { Row, Col } from "antd";
import { Typography } from "antd";
import TocPath from "./TocPath";

const { Title, Link } = Typography;

export interface IPaliChapterData {
	Title: string;
	PaliTitle: string;
	Path: string;
	Book: number;
	Paragraph: number;
}

interface IWidgetPaliChapterCard {
	data: IPaliChapterData;
	onTitleClick?: Function;
}

const Widget = (prop: IWidgetPaliChapterCard) => {
	const path = JSON.parse(prop.data.Path);

	return (
		<>
			<Row>
				<Col span={3}>封面</Col>
				<Col span={21}>
					<Row>
						<Col span={16}>
							<Row>
								<Col>
									<Title
										level={5}
										onClick={(e) => {
											if (typeof prop.onTitleClick !== "undefined") {
												prop.onTitleClick(e);
											}
										}}
									>
										<Link>{prop.data.Title}</Link>
									</Title>
								</Col>
							</Row>
							<Row>
								<Col>{prop.data.PaliTitle}</Col>
							</Row>
							<Row>
								<Col>
									<TocPath data={path} />
								</Col>
							</Row>
						</Col>
						<Col span={8}>进度条</Col>
					</Row>
					<Row>
						<Col></Col>
					</Row>
					<Row>
						<Col span={16}></Col>
					</Row>
				</Col>
			</Row>
		</>
	);
};

export default Widget;