edit post stuff

components/Post.tsx

@@ -4,11 +4,13 @@ import styles from "styles/Posts.module.sass";
 import { useTheme } from "next-themes";
 import Date from "./Date";
 
-const Post = ({ title, date, tag }) => {
+const Post = ({ title, date, tag, slug }) => {
   const { resolvedTheme: theme } = useTheme();
 
   return (
     <>
+      <Link href={`/blog/${slug}`}>
+        <a className={styles.link}>
           <div data-theme={theme} className={styles.post}>
             <div className={styles.title_date}>
               <p className={styles.title}>{title}</p>
@@ -16,8 +18,14 @@ const Post = ({ title, date, tag }) => {
                 <Date dateString={date} />
               </p>
             </div>
-        {tag ? <p data-theme={theme} className={styles.tag}>{tag}</p> : undefined}
+            {tag ? (
+              <p data-theme={theme} className={styles.tag}>
+                {tag}
+              </p>
+            ) : undefined}
           </div>
+        </a>
+      </Link>
     </>
   );
 };

posts/second-post.mdx

@@ -18,3 +18,7 @@ You should ask yourself: "Can I pre-render this page **ahead** of a user's reque
 On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
 
 In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
+
+```js
+const uwu = "owo";
+```

styles/Posts.module.sass

@@ -2,6 +2,8 @@
 
 .post
     display: flex
+    padding-top: .3rem
+    padding-bottom: .3rem
     align-items: center
     transition: all .2s
     background: $background-dark-buttons
@@ -46,3 +48,6 @@
     display: grid
     gap: .5rem
     grid-template-columns: 1
+
+.link
+    cursor: pointer