Articlegrid

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.10.5",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",
     "styled-components": "^5.2.3",

public/index.html

@@ -8,6 +8,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/db-logo.png" />
+
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-1S5BF4RKRZ"></script>

src/App.js

@@ -2,21 +2,26 @@ import React, { useState, useEffect } from "react";
 import './App.css';
 import Header from './components/Header';
 import Footer from './components/Footer';
+import ArticleGrid from "./components/articlegrid/articlegrid";
 
 function App() {
-  const [ data, setData ] = useState(null);
-
-  useEffect(() => {
-		fetch("https://kerckhoff.dailybruin.com/api/packages/flatpages/elections-package-24-25")
-		.then(res => res.json())
-		.then(res => setData(res.data['article.aml']))
-  }, [])
+  const [data, setData] = useState(null);
 
+  useEffect(() => {
+    fetch(
+      "https://kerckhoff.dailybruin.com/api/packages/flatpages/elections-package-24-25"
+    )
+      .then((res) => res.json())
+      .then((res) => setData(res.data["article.aml"]));
+  }, []);
 
   return data && (
     <div className="App">
       <Header/>
       Hello Daily Bruin!
+      <ArticleGrid articles={data.national} title="National" />
+      <ArticleGrid articles={data.state} title="State" />
+      <ArticleGrid articles={data.local} title="Local" />
       <Footer/>
     </div>
   );

src/components/ArticleCard.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+const ArticleContainer = styled("div")`
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  gap: 5%;
+  color: #000;
+  font-family: Poppins;
+  font-style: normal;
+  margin: 2%;
+  background: white;
+`;
+
+const TitleContainer = styled("div")`
+  font-size: 33px;
+  font-weight: 500;
+  line-height: 43px; /* 130.303% */
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const ImgContainer = styled("div")`
+  border: 2px solid #000;
+  background: #949494;
+  width: 400.361px;
+  height: 300px;
+  display: flex;
+  flex-shrink: 0;
+`;
+
+const ArticleCard = ({ props }) => {
+  return (
+    <ArticleContainer>
+      <ImgContainer>
+        <img
+          src={props.article_img}
+          alt="Article"
+          style={{ width: "100%", height: "100%" }}
+        ></img>
+      </ImgContainer>
+      <div>
+        <TitleContainer>{props.article_title}</TitleContainer>
+        <div style={{ fontSize: "28px", fontWeight: 300, lineHeight: "34px" }}>
+          {props.article_byline}
+          <br></br>
+          {props.article_url}
+        </div>
+      </div>
+    </ArticleContainer>
+  );
+};
+
+export default ArticleCard;

src/components/articlegrid/articlegrid.css

@@ -0,0 +1,7 @@
+.container {
+    width: 63.5%;
+    height: 13708px;
+    flex-shrink: 0;
+    justify-content: center;
+    background: #F3F4F5;
+}

src/components/articlegrid/articlegrid.js

@@ -0,0 +1,18 @@
+// import the card
+import React from 'react';
+import Container from 'react-bootstrap/Container'; // for React Bootstrap
+
+import ArticleCard from "../ArticleCard"
+import styles from "./articlegrid";
+
+const ArticleGrid = ({ articles }) => {
+    return (
+        <Container className = {styles.container}>
+            {articles.map((article) => {
+                return <ArticleCard props={article} />;
+            })}
+        </Container>
+    );
+};
+
+export default ArticleGrid;