From b766a2d32e57c1a0fc0321d2291eea4cb2a6a483 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Mon, 19 Sep 2022 22:16:26 +0630
Subject: [PATCH] Update card style layout and add secHeading prop

---
 src/components/Card.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 53e20a9..2e7520e 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -4,18 +4,25 @@ import type { Frontmatter } from "@utils/types";
 export interface Props {
   href?: string;
   post: Frontmatter;
+  secHeading?: boolean;
 }
 
-export default function Card({ href, post }: Props) {
+const styles = {
+  cardContainer: "my-6",
+  titleLink:
+    "text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:underline",
+  titleHeading: "font-medium text-lg decoration-dashed hover:underline",
+};
+
+export default function Card({ href, post, secHeading = true }: Props) {
   return (
-    <li className="my-6">
-      <a
-        href={href}
-        className="text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:underline"
-      >
-        <h2 className="font-medium text-lg decoration-dashed hover:underline">
-          {post.title}
-        </h2>
+    <li className={styles.cardContainer}>
+      <a href={href} className={styles.titleLink}>
+        {secHeading ? (
+          <h2 className={styles.titleHeading}>{post.title}</h2>
+        ) : (
+          <h3 className={styles.titleHeading}>{post.title}</h3>
+        )}
       </a>
       <Datetime datetime={post.datetime} />
       <p>{post.description}</p>