added featured-event page

packages/app/src/pages/featured-event/[id].jsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { Skeleton } from "antd"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+
+import ProcessString from "utils/processString"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+const LocationProcessRegexs = [
+    {
+        regex: /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi,
+        fn: (key, result) => {
+            return <a key={key} href={result[1]} target="_blank" rel="noopener noreferrer">{result[1]}</a>
+        }
+    }
+]
+
+export default (props) => {
+    const eventId = props.match.params["id"]
+
+    const [eventData, setEventData] = React.useState(null)
+
+    const fetchEventData = async () => {
+        const { data } = await app.api.customRequest("main", {
+            method: "GET",
+            url: `/featured_event/${eventId}`
+        }).catch((err) => {
+            console.error(err)
+            app.message.error("Failed to fetch event data")
+
+            return {
+                data: null
+            }
+        })
+
+        if (data) {
+            try {
+                data.announcement = JSON.parse(data.announcement)
+                setEventData(data)
+            } catch (error) {
+                console.error(error)
+                app.message.error("Failed to parse event data")
+            }
+        }
+    }
+
+    const renderDates = (dates) => {
+        return <div className="dates">
+            <div className="startsAt">
+                {
+                    dates[0]
+                }
+            </div>
+            <span className="separator">
+                to
+            </span>
+            <div className="endsAt">
+                {
+                    dates[1]
+                }
+            </div>
+        </div>
+    }
+
+    console.log(eventData)
+
+    React.useEffect(() => {
+        fetchEventData()
+    }, [])
+
+    if (!eventData) {
+        return <Skeleton active />
+    }
+
+    return <div className="event">
+        <div className="header" style={eventData.announcement.backgroundStyle}>
+            {eventData.announcement.logoImg &&
+                <div className="logo">
+                    <img src={eventData.announcement.logoImg} />
+                </div>
+            }
+            <div className="title">
+                <h1>{eventData.name}</h1>
+                <h2>{eventData.announcement.description}</h2>
+            </div>
+        </div>
+
+        <div className="content">
+            <div className="panel">
+                <div className="dates">
+                    <Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
+                </div>
+
+                <div className="location">
+                    <Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
+                </div>
+            </div>
+
+            <div className="panel">
+                <div className="description">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {eventData.description}
+                    </ReactMarkdown>
+                </div>
+            </div>
+        </div>
+    </div>
+}

packages/app/src/pages/featured-event/index.less

@@ -0,0 +1,91 @@
+.event {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: flex-end;
+
+    color: var(--text-color);
+
+    .header {
+        display: flex;
+        flex-direction: row;
+
+        width: 100%;
+
+        padding: 20px;
+
+        margin-bottom: 20px;
+
+        border-radius: 12px;
+
+        .logo {
+            height: 100%;
+
+            width: fit-content;
+
+            max-width: 200px;
+
+            img {
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        .title {
+            display: flex;
+            flex-direction: column;
+
+            margin-left: 50px;
+
+            padding: 20px 0;
+
+            font-family: "Space Grotesk", sans-serif;
+
+            h1 {
+                font-size: 2rem;
+                font-weight: 700;
+            }
+        }
+    }
+
+    .content {
+        display: grid;
+        grid-template-columns: 30% 1fr;
+        grid-template-rows: 1fr;
+        grid-column-gap: 20px;
+        grid-row-gap: 0px;
+
+        .panel {
+            display: flex;
+            flex-direction: column;
+
+            padding: 20px;
+
+            background-color: var(--background-color-accent);
+
+            border-radius: 12px;
+
+            height: fit-content;
+        }
+    }
+
+    .dates {
+        display: flex;
+        flex-direction: row;
+
+        margin-bottom: 10px;
+
+        .startsAt {
+            display: flex;
+
+            margin-right: 10px;
+        }
+
+        .endsAt {
+            display: flex;
+
+            margin-left: 10px;
+        }
+    }
+}