From eb60d0e9d0b82057cfa0c92a57353d53dae73ec8 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Mon, 19 Sep 2022 22:19:05 +0630
Subject: [PATCH] Replace Card & Datetime astro components with react
 components

---
 src/components/Card.astro     | 47 -----------------------------------
 src/components/Datetime.astro | 38 ----------------------------
 src/pages/index.astro         |  2 +-
 src/pages/posts/[slug].astro  |  2 +-
 src/pages/posts/index.astro   |  2 +-
 src/pages/tags/[tag].astro    |  2 +-
 6 files changed, 4 insertions(+), 89 deletions(-)
 delete mode 100644 src/components/Card.astro
 delete mode 100644 src/components/Datetime.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index db808a1..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-import Datetime from "./Datetime.astro";
-import type { Frontmatter } from "@utils/types";
-
-export interface Props {
-  href?: string;
-  post: Frontmatter;
-  secHeading?: boolean;
-}
-
-const { href, post, secHeading = true } = Astro.props;
----
-
-<li>
-  <a href={href}>
-    {secHeading ? <h2>{post.title}</h2> : <h3>{post.title}</h3>}
-  </a>
-  <Datetime datetime={post.datetime} />
-  <p>
-    {post.description}
-  </p>
-</li>
-
-<style>
-  li {
-    @apply my-6;
-  }
-  a {
-    @apply text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:underline;
-  }
-  a h2,
-  a h3 {
-    @apply font-medium text-lg decoration-dashed hover:underline;
-  }
-  .date-time-wrapper {
-    @apply opacity-80;
-  }
-  .calendar {
-    @apply scale-90;
-  }
-  .date-time {
-    @apply italic text-sm;
-  }
-  svg {
-    @apply w-6 h-6 inline-block fill-skin-base;
-  }
-</style>
diff --git a/src/components/Datetime.astro b/src/components/Datetime.astro
deleted file mode 100644
index 509864f..0000000
--- a/src/components/Datetime.astro
+++ /dev/null
@@ -1,38 +0,0 @@
----
-import formatDatetime from "@utils/formatDatetime";
-
-export interface Props {
-  datetime: string;
-  size?: "sm" | "lg";
-  className?: string;
-}
-
-const { datetime, size = "sm", className } = Astro.props;
----
-
-<div class={`date-time-wrapper ${className}`}>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class={`${size === "sm" ? "scale-90" : "scale-100"}`}
-    ><path
-      d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"
-    ></path><path
-      d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"
-    ></path>
-  </svg>
-  <span class={`italic ${size === "sm" ? "text-sm" : "text-base"}`}
-    >{formatDatetime(datetime)}
-  </span>
-</div>
-
-<style>
-  .date-time-wrapper {
-    @apply opacity-80 flex items-center space-x-2;
-  }
-  .date-time {
-    @apply italic text-sm;
-  }
-  svg {
-    @apply w-6 h-6 inline-block fill-skin-base;
-  }
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 49602be..ebfdd6d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,10 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
-import Card from "@components/Card.astro";
 import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
+import Card from "@components/Card";
 import getSortedPosts from "@utils/getSortedPosts";
 import type { Frontmatter } from "@utils/types";
 import socialLinks from "@utils/socialLinks";
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 5bfef23..2f7d06a 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -2,8 +2,8 @@
 import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Datetime from "@components/Datetime.astro";
 import Tag from "@components/Tag.astro";
+import Datetime from "@components/Datetime";
 import type { MarkdownInstance } from "astro";
 import type { Frontmatter } from "@utils/types";
 import Breadcrumbs from "@components/Breadcrumbs.astro";
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 4efb2a9..1ec65c3 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -3,7 +3,7 @@ import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Main from "@layouts/Main.astro";
-import Card from "@components/Card.astro";
+import Card from "@components/Card";
 import getSortedPosts from "@utils/getSortedPosts";
 import type { Frontmatter } from "@utils/types";
 
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index e8bab20..822caf9 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -3,7 +3,7 @@ import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Card from "@components/Card.astro";
+import Card from "@components/Card";
 import type { MarkdownInstance } from "astro";
 import type { Frontmatter } from "@utils/types";
 import getUniqueTags from "@utils/getUniqueTags";