update @pingcap-inc/tidb-community-ui: fix SidebarEvent

pingcap-inc · Nov 30, 2022 · 02e9c10 · 02e9c10
1 parent 546d143
commit 02e9c10
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 11 deletions.
diff --git a/packages/site-components/src/components/asktug/home/Sidebar/SidebarEvent.less b/packages/site-components/src/components/asktug/home/Sidebar/SidebarEvent.less
@@ -1,7 +1,73 @@
 
 .asktug {
   &-sidebar {
-    &-blog {
+    &-event {
+      &-container {
+        display: flex;
+        cursor: pointer;
+        padding: 1rem 0;
+        border-bottom: 1px solid #e9eaee;
+        &:hover {
+          border-color: #be1d32;
+          svg {
+            visibility: visible;
+          }
+        }
+        &-head {
+          font-size: 14px;
+          color: #ffffff;
+          background: #b6b9c3;
+        }
+        &-body {
+          display: flex;
+          justify-content: center;
+          height: 25px;
+          font-size: 18px;
+          font-weight: bold;
+          color: #2d3758;
+          background: #ffffff;
+          position: relative;
+          &-arrow {
+            position: absolute;
+            bottom: -2px;
+            right: -1px;
+            color: #b6b9c3;
+            transform: rotate(-45deg);
+            z-index: 2;
+            width: 13px;
+            height: 13px;
+            &-oppsite {
+              color: #f7f8f9;
+              transform: rotate(135deg);
+              bottom: -5px;
+              right: -5px;
+              z-index: 1;
+            }
+          }
+        }
+      }
+      &-content {
+        flex: 1;
+
+        h3 {
+          font-size: 16px;
+          font-weight: normal;
+          margin-bottom: 0;
+        }
+
+        .ant-badge {
+          margin-left: 2rem;
+
+          &-status-text {
+            font-size: 12px;
+            color: rgba(#2c2c2c, 0.6);
+          }
+
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
       ul {
         list-style: none;
         a {

diff --git a/packages/site-components/src/components/asktug/home/Sidebar/SidebarEvent.tsx b/packages/site-components/src/components/asktug/home/Sidebar/SidebarEvent.tsx
@@ -1,10 +1,13 @@
 import React, {useEffect, useState} from "react"
 import axios from "axios";
+import dayjs from "dayjs";
+import {Badge} from "antd";
 
 import './SidebarEvent.less'
 import SidebarCard from "./SidebarCard";
 import SiteLink from "../../../site-link";
 import {Site} from "../../../../utils/site";
+import {CaretUpOutlined} from "@ant-design/icons";
 
 export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 }
@@ -23,9 +26,10 @@ export interface IEvent {
 }
 
 const getEvents = async () => {
-  const url = 'http://localhost:3300/api/cms/tidbio-homepage-main-activities'
-  const response = await axios.get<IEvent[]>(url)
-  return response.data
+  //const url = 'http://localhost:3300/next-api/cms/tidbio-homepage-main-activities'
+  //const response = await axios.get<IEvent[]>(url)
+  //return response.data
+  return []
 }
 
 const SidebarEvent: React.FC<IProps> = (props) => {
@@ -35,17 +39,39 @@ const SidebarEvent: React.FC<IProps> = (props) => {
   useEffect(() => {
     getEvents().then(setEvents)
   }, [])
+
   return (
     <div className={'asktug-sidebar-event'}>
       <SidebarCard header={{start: '活动日历', end: (<SiteLink site={Site.home} newWindow url={'/event'}>更多 {'>'}</SiteLink>)}}>
         <ul>
-          {events.map((value) => (
-            <li key={value.id}>
-              <SiteLink site={Site.home} newWindow url={`/event`}>
-
-              </SiteLink>
-            </li>
-          ))}
+          {events.map((value) => {
+            const dayObj = dayjs(value.date);
+            const month = dayObj.format('MMM');
+            const day = dayObj.format('D');
+            return (
+              <li key={value.id}>
+                <SiteLink site={Site.home} newWindow url={`/event`}>
+                  <div className={'asktug-sidebar-event-container'}>
+                    <div className={'asktug-sidebar-event-container-calendar'}>
+                      <div className={'asktug-sidebar-event-container-calendar-head'}>{month}</div>
+                      <div className={'asktug-sidebar-event-container-calendar-body'}>
+                        {day}
+                        <CaretUpOutlined className="asktug-sidebar-event-container-calendar-body-arrow" />
+                        <CaretUpOutlined className="asktug-sidebar-event-container-calendar-body-arrow-oppsite" />
+                      </div>
+                    </div>
+                    <div className={'asktug-sidebar-event-container-content'}>
+                      <h3>{value.title}</h3>
+                      <div>
+                        {/*{value.status && <Badge color={'#ee6d85'} text={value.status} />}*/}
+                        {value.type && <Badge color={'#69c384'} text={value.type} />}
+                      </div>
+                    </div>
+                  </div>
+                </SiteLink>
+              </li>
+            )
+          })}
         </ul>
       </SidebarCard>
     </div>