[add] Activity page with Calendar & List

components/Home/UpcomingEvents.tsx

@@ -1,43 +1,47 @@
+import { observer } from 'mobx-react';
 import Link from 'next/link';
-import { FC } from 'react';
-import { Button, Card, Col, Container, Row } from 'react-bootstrap';
+import { FC, useContext } from 'react';
+import { Button, Card, Col, Row } from 'react-bootstrap';
 
+import { I18nContext } from '../../models/Translation';
 import { ArticleMeta } from '../../pages/api/core';
 import { SectionTitle } from './SectionTitle';
 
 interface UpcomingEventsProps {
   events: ArticleMeta[];
 }
 
-export const UpcomingEvents: FC<UpcomingEventsProps> = ({ events }) => (
-  <div className="py-5 bg-white w-100 m-0">
-    <Container>
-      <SectionTitle>近期活动</SectionTitle>
+export const UpcomingEvents: FC<UpcomingEventsProps> = observer(({ events }) => {
+  const { t } = useContext(I18nContext);
+
+  return (
+    <>
+      <SectionTitle>{t('upcoming_events')}</SectionTitle>
 
       <Row className="g-4" xs={1} sm={2} md={3}>
         {events.map(({ name, meta, path }) => (
           <Col key={name}>
             <Card body>
               <Card.Title className="text-dark">{name}</Card.Title>
               <Card.Text className="text-dark">
-                时间: {meta?.start || 'N/A'}
+                {t('activity_time')}: {meta?.start || 'N/A'}
               </Card.Text>
               <Card.Text className="text-dark">
-                地点: {meta?.address || 'N/A'}
+                {t('activity_location')}: {meta?.address || 'N/A'}
               </Card.Text>
 
               <Link href={path || '#'} className="btn btn-primary">
-                查看详情
+                {t('view_details')}
               </Link>
             </Card>
           </Col>
         ))}
       </Row>
       <div className="text-center mt-4">
-        <Button variant="outline-primary" size="lg" href="/article/Activity">
-          查看全部活动 →
+        <Button variant="outline-primary" size="lg" href="/activity">
+          {t('view_all_activities')} →
         </Button>
       </div>
-    </Container>
-  </div>
-);
+    </>
+  );
+});

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.