Update Member.tsx

Author: 7his15CYS

src/page/Member.tsx

@@ -87,6 +87,18 @@ export function Member(){
 
     ]
 
+    const CoreTableItem = [
+        {
+            key: '1',
+            name: "-",
+            role: "-",
+            coAdvisor: '',
+            experience: "",
+            certificate: "",
+            //website: ""
+        }
+    ]
+    
     const MembersTableItem = [
         {
             key: '1',
@@ -143,6 +155,48 @@ export function Member(){
         }
     ]
 
+    const core_tableColumns: ColumnType<any>[] = [
+        {
+            title: "姓名",
+            dataIndex: 'name',
+            key: "name",
+            width: '15%',
+            render: (_text: string, render: any, _index: number) => {
+                return (
+                    <>
+                        {render.website === undefined ? <p>{render.name}</p> : <a href={render.website}>{render.name}</a>}
+                    </>
+                )
+            }
+        },
+        {
+            title: "單位",
+            render: (_text: string, render: any, _index: number) => {
+                return (
+                    <>
+                        <p>{render.joinDate}
+                        { render.role !== "" ? <span>{render.role}</span> : null}
+                        </p>
+                        { render.coAdvisor == "" ? null : <p>－與 <span style={{fontWeight: "800"}}>{render.coAdvisor}</span> 老師共同指導</p> }
+                    </>
+                )
+            },
+            width: '15%'
+        },
+        {
+            title: "特殊經歷",
+            render: (_text: string, render: any, _index: number) => {
+                return (
+                    <div className="d-flex flex-column">
+                        { render.ability == '' ? null : <p>{render.ability}</p> }
+                        { render.experience == '' ? null : <p className="fst-italic" style={{color: "#0693e3"}}>{render.experience}</p> }
+                        { render.certificate == '' ? null : <p style={{color: "lightgreen"}}>{render.certificate}</p> }
+                    </div> 
+                )  
+            },
+            width: '35%'
+        }
+    ]
 
     const tableColumns: ColumnType<any>[] = [
         {
@@ -195,7 +249,12 @@ export function Member(){
             </>
             <hr></hr>
             <>
-                <h4 className="text-center fw-bold">社團成員（Club Members）</h4>
+                <h4 className="text-center fw-bold">核心成員（Core Members）</h4>
+                <Table columns={core_tableColumns} dataSource={CoreTableItem} pagination={false} bordered></Table>
+            </>
+            <hr></hr>
+            <>
+                <h4 className="text-center fw-bold">一般成員（Members）</h4>
                 <Table columns={tableColumns} dataSource={MembersTableItem} pagination={false} bordered></Table>
             </>
         </div>