Merge branch 'articlecard-evelyncho-emilyzhang' into articlegrid

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

@@ -5,14 +5,15 @@ 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">

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;