From 7601bf0c9c80a8260efad37024ba2a31e29d1272 Mon Sep 17 00:00:00 2001
From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:36:34 +0800
Subject: [PATCH] feat(announcements): introduce preview component

---
 src/layouts/EditHomepage/HomepagePreview.tsx  |  14 ++
 .../homepage/AnnouncementsSection.tsx         | 170 ++++++++++++++++++
 2 files changed, 184 insertions(+)
 create mode 100644 src/templates/homepage/AnnouncementsSection.tsx

diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx
index aaf4017455..bb86e43de8 100644
--- a/src/layouts/EditHomepage/HomepagePreview.tsx
+++ b/src/layouts/EditHomepage/HomepagePreview.tsx
@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { TemplateAnnouncementsSection } from "templates/homepage/AnnouncementsSection"
 import TemplateHeroSection from "templates/homepage/HeroSection"
 import TemplateInfobarSection from "templates/homepage/InfobarSection"
 import TemplateInfopicLeftSection from "templates/homepage/InfopicLeftSection"
@@ -166,6 +167,19 @@ export const HomepagePreview = ({
               )}
             </>
           )}
+          {/* Announcements section */}
+          {EditorHomepageFrontmatterSection.isAnnouncements(section) && (
+            <>
+              <TemplateAnnouncementsSection
+                key={`section-${sectionIndex}`}
+                title={section.announcements.title}
+                subtitle={section.announcements.subtitle}
+                announcementItems={section.announcements.announcement_items}
+                sectionIndex={sectionIndex}
+                ref={scrollRefs[sectionIndex] as Ref<HTMLDivElement>}
+              />
+            </>
+          )}
         </>
       ))}
     </div>
diff --git a/src/templates/homepage/AnnouncementsSection.tsx b/src/templates/homepage/AnnouncementsSection.tsx
new file mode 100644
index 0000000000..bf1e562535
--- /dev/null
+++ b/src/templates/homepage/AnnouncementsSection.tsx
@@ -0,0 +1,170 @@
+import { forwardRef } from "react"
+
+import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
+
+import { getClassNames } from "templates/utils/stylingUtils"
+
+import { AnnouncementsSection } from "types/homepage"
+
+type TemplateAnnouncementsSectionProps = Omit<
+  AnnouncementsSection,
+  "announcement_items"
+> & {
+  announcementItems: AnnouncementsSection["announcement_items"]
+  sectionIndex: number
+}
+
+export const TemplateAnnouncementsSection = forwardRef<
+  HTMLDivElement,
+  TemplateAnnouncementsSectionProps
+>(
+  (
+    {
+      title,
+      subtitle,
+      announcementItems,
+      sectionIndex,
+    }: TemplateAnnouncementsSectionProps,
+    ref
+  ) => {
+    return (
+      <div ref={ref}>
+        <section
+          className={getClassNames(editorStyles, [
+            `bp-section`,
+            sectionIndex % 2 === 1 ? "bg-newssection" : "",
+          ])}
+        >
+          <div
+            className={getClassNames(editorStyles, [
+              "bp-container",
+              "is-fluid",
+            ])}
+          >
+            <div className={editorStyles.row}>
+              <div
+                className={getClassNames(editorStyles, [
+                  "col",
+                  "is-full",
+                  "p-16",
+                ])}
+              >
+                <>
+                  {subtitle && (
+                    <p
+                      className={getClassNames(editorStyles, [
+                        "eyebrow",
+                        "is-uppercase",
+                        "pb-4",
+                        "has-text-centered",
+                      ])}
+                    >
+                      {subtitle}
+                    </p>
+                  )}
+                  {title && (
+                    <h1
+                      className={getClassNames(editorStyles, [
+                        "has-text-secondary",
+                        "pb-4",
+                        "has-text-centered",
+                      ])}
+                    >
+                      <b>{title}</b>
+                    </h1>
+                  )}
+
+                  <hr
+                    className={getClassNames(editorStyles, [
+                      "my-8",
+                      "announcements-divider",
+                    ])}
+                  />
+
+                  {announcementItems &&
+                    announcementItems.map((announcement, index) => {
+                      return (
+                        <>
+                          <div
+                            className={getClassNames(editorStyles, [
+                              "row",
+                              "is-desktop",
+                              "announcements-announcement-row-px-desktop",
+                            ])}
+                          >
+                            <div
+                              className={getClassNames(editorStyles, [
+                                "col",
+                                "is-4-desktop",
+                                "announcements-announcement-col-px-desktop",
+                                "announcements-announcement-title-mr-desktop",
+                              ])}
+                            >
+                              <h3
+                                className={getClassNames(editorStyles, [
+                                  "announcements-announcement-title",
+                                  "mb-4",
+                                ])}
+                              >
+                                <b>{announcement.title}</b>
+                              </h3>
+                              <p
+                                className={
+                                  editorStyles[
+                                    "announcements-announcement-subtitle"
+                                  ]
+                                }
+                              >
+                                {announcement.date}
+                              </p>
+                            </div>
+                            <div
+                              className={getClassNames(editorStyles, [
+                                "col",
+                                "announcements-announcement-col-px-desktop",
+                              ])}
+                            >
+                              <p>{announcement.announcement}</p>
+                              {announcement.link_text && announcement.link_url && (
+                                <div className={editorStyles["mt-4"]}>
+                                  <div
+                                    className={getClassNames(editorStyles, [
+                                      "announcements-announcement-link",
+                                      "bp-sec-button",
+                                    ])}
+                                  >
+                                    <span>{announcement.link_text}</span>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                          {announcementItems &&
+                          announcementItems.length === index + 1 ? (
+                            <hr
+                              className={getClassNames(editorStyles, [
+                                "mt-8",
+                                "mb-0",
+                                "announcements-divider",
+                              ])}
+                            />
+                          ) : (
+                            <hr
+                              className={getClassNames(editorStyles, [
+                                "my-8",
+                                "announcements-divider",
+                              ])}
+                            />
+                          )}
+                        </>
+                      )
+                    })}
+                </>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    )
+  }
+)