revert: revert back to JSX Card component

src/components/Card.tsx

@@ -0,0 +1,32 @@
+import Datetime from "./Datetime";
+import type { BlogFrontmatter } from "@content/_schemas";
+
+export interface Props {
+  href?: string;
+  frontmatter: BlogFrontmatter;
+  secHeading?: boolean;
+}
+
+export default function Card({ href, frontmatter, secHeading = true }: Props) {
+  const { title, pubDatetime, description } = frontmatter;
+  return (
+    <li className="my-6">
+      <a
+        href={href}
+        className="text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block"
+      >
+        {secHeading ? (
+          <h2 className="font-medium text-lg decoration-dashed hover:underline">
+            {title}
+          </h2>
+        ) : (
+          <h3 className="font-medium text-lg decoration-dashed hover:underline">
+            {title}
+          </h3>
+        )}
+      </a>
+      <Datetime datetime={pubDatetime} />
+      <p>{description}</p>
+    </li>
+  );
+}