feat: support current/past status for events

acid-info · Apr 23, 2024 · 11d8059 · 11d8059
1 parent 0051667
commit 11d8059
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 29 deletions.
diff --git a/packages/docusaurus-playground/root-pages/events/index.mdx b/packages/docusaurus-playground/root-pages/events/index.mdx
@@ -14,14 +14,12 @@ import {
 
 # Events
 
-List of all Waku events
-
 <head>
-  <body className="events" />
+  <body className="events event-details" />
 </head>
 
 <EventCardList
-  data={[
+  current={[
     {
       thumbnail: '/img/event-banner.png',
       title: 'Meet Waku: Uncompromising Web3 Communication at Scale',
@@ -79,4 +77,20 @@ List of all Waku events
       href: '/events/test',
     },
   ]}
+  past={[
+    {
+      thumbnail: '/img/event-banner.png',
+      title: '1111',
+      date: 'Monday 15-19 January 2024 / 6 PM PST',
+      location: '508 University Avenue Palo Alto, CA 94301 United States',
+      href: '/events/test',
+    },
+    {
+      thumbnail: '/img/event-banner.png',
+      title: '2222',
+      date: 'Monday 15-19 January 2024 / 6 PM PST',
+      location: '508 University Avenue Palo Alto, CA 94301 United States',
+      href: '/events/test',
+    },
+  ]}
 />
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss
@@ -17,7 +17,7 @@
 }
 
 .mdx-event-card__thumbnail {
-  aspect-ratio: 5 / 1;
+  height: 55px;
   border: 1px solid rgba(var(--lsd-border-primary), 0.2);
 }
 

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.scss
@@ -1,13 +1,24 @@
 @use '../../../css/utils';
 @use '../../../css/lsd';
 
+.mdx-event-card-list__container {
+  margin-top: 40px;
+}
+
 .mdx-event-card-list__button {
   display: block;
   margin: 0 auto;
 }
 
 @include utils.responsive('sm', 'down') {
   .mdx-event-card-list__container {
+    margin-top: 32px;
     margin-bottom: 48px;
   }
+
+  .mdx-event-card-list__tabs {
+    .lsd-tab-item {
+      padding: 6px 14px !important;
+    }
+  }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCardList/EventCardList.tsx
@@ -2,43 +2,79 @@ import React, { useState } from 'react'
 import './EventCardList.scss'
 import { Button } from '@acid-info/lsd-react'
 import { Box, EventCard, EventCardProps, Grid } from '..'
+import { TabItem, Tabs } from '@acid-info/lsd-react'
 
 export type EventCardListProps = {
-  data: EventCardProps[]
+  current: EventCardProps[]
+  past: EventCardProps[]
 }
 
-export const EventCardList: React.FC<EventCardListProps> = ({ data }) => {
-  const [showMore, setShowMore] = useState<boolean>(data?.length > 6)
-  const [count, setCount] = useState<number>(6)
+export enum EventStatus {
+  CURRENT = 'Current',
+  PAST = 'Past',
+}
+
+const LIMIT = 8
+
+export const EventCardList: React.FC<EventCardListProps> = ({
+  current,
+  past,
+  ...props
+}) => {
+  const [activeTab, setActiveTab] = useState<EventStatus>(EventStatus.CURRENT)
+  const data = activeTab === EventStatus.CURRENT ? current : past
+
+  const [showMore, setShowMore] = useState<boolean>(data?.length > LIMIT)
+  const [count, setCount] = useState<number>(LIMIT)
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab as EventStatus)
+    setCount(LIMIT)
+    setShowMore(data?.length > LIMIT)
+  }
 
   const handleShowMore = () => {
-    setCount((prev) => prev + 6)
+    setCount((prev) => prev + LIMIT)
 
     if (count + 6 >= data?.length) {
       setShowMore(false)
     }
   }
 
   return (
-    <div className="mdx-event-card-list__container">
-      <Box top={56} bottom={80}>
-        <Grid xs={{ cols: 1, gap: '80px 16px' }} md={{ cols: 2 }}>
-          {data.slice(0, count).map((event, index) => (
-            <Grid.Item xs={1} key={index}>
-              <EventCard {...event} />
-            </Grid.Item>
-          ))}
-        </Grid>
-      </Box>
-      {showMore && (
-        <Button
-          className="mdx-event-card-list__button"
-          onClick={handleShowMore}
-          size="large"
-        >
-          See more
-        </Button>
-      )}
+    <div className="mdx-event-card-list__container" {...props}>
+      <Tabs
+        activeTab={activeTab}
+        onChange={handleTabChange}
+        className="mdx-event-card-list__tabs"
+      >
+        <TabItem key={'current'} name={`Current`}>
+          {`Current`}
+        </TabItem>
+        <TabItem key={'past'} name={`Past`}>
+          {`Past`}
+        </TabItem>
+      </Tabs>
+      <div>
+        <Box top={{ xs: 80, sm: 96 }} bottom={80}>
+          <Grid xs={{ cols: 1, gap: '80px 16px' }} md={{ cols: 4 }}>
+            {data.slice(0, count).map((event, index) => (
+              <Grid.Item xs={1} key={index}>
+                <EventCard {...event} />
+              </Grid.Item>
+            ))}
+          </Grid>
+        </Box>
+        {showMore && (
+          <Button
+            className="mdx-event-card-list__button"
+            onClick={handleShowMore}
+            size="large"
+          >
+            See more
+          </Button>
+        )}
+      </div>
     </div>
   )
 }