Replace Card & Datetime astro components with react components

src/components/Card.astro

@@ -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>

src/components/Datetime.astro

@@ -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>

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";

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";

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";
 

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";