Merge pull request #120 from dailybruin/bryson/quad-description

Added description parameter for category pages
dailybruin · Sep 24, 2023 · 4e1a4da · 4e1a4da
2 parents 07ce5b6 + e514f12
commit 4e1a4da
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/components/SectionHeader/index.jsx b/components/SectionHeader/index.jsx
@@ -81,6 +81,25 @@ export default class SectionHeader extends React.Component {
         >
           {renderTitle()}
         </div>
+        {this.props.description != undefined && (
+          <div
+            css={css`
+              text-align: center;
+              list-style: none;
+              color: black;
+              font-family: ${globals.menuFont};
+              font-size: 16px;
+              padding-bottom: 8px;
+              margin-left: 32px;
+              margin-right: 32px;
+              @media (max-width: 600px) {
+                display: none;
+              }
+            `}
+          >
+            {this.props.description}
+          </div>
+        )}
         <div
           css={css`
             width: 100%;

diff --git a/pages/category/[slug].jsx b/pages/category/[slug].jsx
@@ -7,6 +7,13 @@ import Head from "next/head";
 import SectionHeader from "../../components/SectionHeader";
 import CategoryLayout from "../../layouts/Category";
 
+const categoryDescriptions = {
+  quad:
+    "The Quad is the Daily Bruin's explanatory journalism section, which aims to break down salient topics \
+  to make them digestible for UCLA's student body and community at large. Our in-depth reporting incorporates the \
+  broader context of these topics to give a more comprehensive view on financial, lifestyle and academic discussions."
+};
+
 class Category extends Component {
   static async getInitialProps(context) {
     // slug is from url
@@ -67,6 +74,7 @@ class Category extends Component {
         <div style={{ padding: "6px" }}>
           <SectionHeader
             category={this.props.category[0].name}
+            description={categoryDescriptions[this.props.category[0].slug]}
             subcategories={sectionLinks}
           />
         </div>