first commit

pages/articles.tsx

@@ -0,0 +1,58 @@
+import ArticleCard from '@/components/ArticleCard';
+
+import { Article } from '@/types';
+
+import styles from '@/styles/ArticlesPage.module.css';
+
+interface ArticlesPageProps {
+  articles: Article[];
+}
+
+const ArticlesPage = ({ articles }: ArticlesPageProps) => {
+  return (
+    <div className={styles.layout}>
+      <h1 className={styles.pageTitle}>My Articles</h1>
+      <p className={styles.pageSubtitle}>
+        Recent posts from{' '}
+        <a
+          href="https://dev.to/galads"
+          target="_blank"
+          rel="noopener"
+          className={styles.underline}
+        >
+          dev.to
+        </a>{' '}
+        where I share insights and tutorials about web development.
+      </p>
+       <div className={styles.container}>
+       {articles.length > 0 ? (
+          articles.map((article) => (
+          <ArticleCard key={article.id} article={article} />
+        ))
+        ) :(
+          <p>No articles available at the moment.</p>
+        )}
+      </div> 
+    </div>
+  );
+};
+
+export async function getStaticProps() {
+   const res = await fetch(
+    'https://dev.to/api/articles/me/published?per_page=6',
+    {
+      headers: {
+        'api-key': process.env.DEV_TO_API_KEY!,
+      },
+    }
+  );
+
+  const data = await res.json();
+
+  return {
+    props: { title: 'Articles', articles: data },
+    revalidate: 60,
+  };
+}
+
+export default ArticlesPage;