add style?: TDisplayStyle;

dashboard/src/components/template/Article.tsx

@@ -4,14 +4,22 @@ import { useState } from "react";
 import Article, { ArticleType } from "../article/Article";
 
 const { Link } = Typography;
-
+export type TDisplayStyle = "modal" | "card";
 interface IWidgetChapterCtl {
   type?: ArticleType;
   id?: string;
   channel?: string;
-  text?: string;
+  title?: string;
+  style?: TDisplayStyle;
 }
-const ArticleCtl = ({ type, id, channel, text }: IWidgetChapterCtl) => {
+
+const ArticleCtl = ({
+  type,
+  id,
+  channel,
+  title,
+  style = "modal",
+}: IWidgetChapterCtl) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const showModal = () => {
     setIsModalOpen(true);
@@ -24,13 +32,14 @@ const ArticleCtl = ({ type, id, channel, text }: IWidgetChapterCtl) => {
   const handleCancel = () => {
     setIsModalOpen(false);
   };
+  const aTitle = title ? title : "chapter" + id;
   return (
     <>
-      <Link onClick={showModal}>{text ? text : "chapter" + id}</Link>
+      <Link onClick={showModal}>{aTitle}</Link>
       <Modal
         width={"80%"}
         style={{ maxWidth: 1000 }}
-        title="chapter"
+        title={aTitle}
         open={isModalOpen}
         onOk={handleOk}
         onCancel={handleCancel}