Add first version of article section

front/src/components/ArticleCard.tsx

@@ -0,0 +1,26 @@
+import { Article } from '../types'
+
+export default function ArticleCard({ article }: { article: Article }) {
+
+    return (
+        <div style={{
+            backgroundColor: 'var(--color-lightblue)',
+            borderRadius: '8px',
+            color: 'var(--color-darkblue)',
+            fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontSize: '14px',
+            lineHeight: '20px',
+            margin: '10px',
+            padding: '10px',
+        }}>
+            <h2 style={{
+                fontSize: '20px',
+                fontWeight: '500',
+                margin: '0',
+            }}>{article.title}</h2>
+            <p style={{
+                margin: '0',
+            }}>{article.content}</p>
+        </div>
+    )
+}

front/src/components/ArticlesSection.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import ArticleCard from "./ArticleCard";
+import { Article } from "../types";
+
+export default function ArticlesSection() {
+
+    const [articles, setArticles] = useState<Article[]>([]);
+
+    useEffect(() => {
+        fetch('/api/article')
+            .then(response => response.json())
+            .then((data: Article[]) => setArticles(data));
+    }, []);
+
+    return (
+        <div>
+            {articles.map(article => (
+                <ArticleCard key={article.id} article={article} />
+            ))}
+        </div>
+    )
+}

front/src/pages/MainPage.tsx

@@ -1,9 +1,11 @@
+import ArticlesSection from '../components/ArticlesSection.tsx'
 import NavBar from '../components/NavBar.tsx'
 
 export default function MainPage() {
     return (
         <div>
             <NavBar />
+            <ArticlesSection />
         </div>
     )
 }

front/src/types.ts

@@ -0,0 +1,7 @@
+interface Article {
+    id: number;
+    title: string;
+    content: string;
+}
+
+export type { Article };