feat: Add theme switch

services/www/src/app/articles/index.tsx

@@ -1,42 +1,45 @@
-import { Container, Header, Link, Separator, Article } from '@ermnvldmr/ui';
+import { Header, Link, Separator, Article , VStack } from '@ermnvldmr/ui';
 import React from 'react';
 
 import { sortedArticles } from '../../../content/registry';
+import { IndexLayout } from '../../components/layouts/IndexLayout/IndexLayout';
 import { createPage } from '../../lib/core/createPage';
 import { SITE_TITLE } from '../../lib/shared/constants';
 
 createPage(
   function ArticlesList(): React.JSX.Element {
     return (
-      <Container as="main" className="mx-auto max-w-5xl px-6 py-20">
-        <Header className="mb-12 text-center" level={1}>
-          Articles
-        </Header>
-        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-          {sortedArticles.map((article, index) => (
-            <React.Fragment key={article.slug}>
-              {index > 0 && index % 2 === 0 && (
-                <div className="col-span-1 py-8 md:col-span-2">
-                  <Separator className="w-full" type="double" />
-                </div>
-              )}
-              <Link className="group block h-full no-underline!" href={`/articles/${article.slug}`}>
-                <Article
-                  additionalText={article.tags?.join(' • ')}
-                  headline={article.title}
-                  subHeadline={article.createdDate.toLocaleDateString(undefined, {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                  })}
-                >
-                  {article.description}
-                </Article>
-              </Link>
-            </React.Fragment>
-          ))}
-        </div>
-      </Container>
+      <IndexLayout>
+        <VStack className="w-full" gap={8}>
+          <Header level={1}>
+            Articles
+          </Header>
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            {sortedArticles.map((article, index) => (
+              <React.Fragment key={article.slug}>
+                {index > 0 && index % 2 === 0 && (
+                  <div className="col-span-1 py-8 md:col-span-2">
+                    <Separator className="w-full" type="double" />
+                  </div>
+                )}
+                <Link className="group block h-full no-underline!" href={`/articles/${article.slug}`}>
+                  <Article
+                    additionalText={article.tags?.join(' • ')}
+                    headline={article.title}
+                    subHeadline={article.createdDate.toLocaleDateString(undefined, {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
+                  >
+                    {article.description}
+                  </Article>
+                </Link>
+              </React.Fragment>
+            ))}
+          </div>
+        </VStack>
+      </IndexLayout>
     );
   },
   {