Update

components/Alert.tsx

@@ -0,0 +1,39 @@
+import { Container } from "./Container";
+// import { EXAMPLE_PATH } from "@/lib/constants";
+import cn from "classnames";
+
+type Props = {
+  preview?: boolean;
+};
+
+export function Alert({ preview }: Props) {
+  return (
+    <div
+      className={cn("border-b dark:bg-slate-800", {
+        "border-neutral-800 bg-neutral-800 text-white": preview,
+        "border-neutral-200 bg-neutral-50": !preview,
+      })}
+    >
+      <Container>
+        <div className="py-2 text-center text-sm">
+          {preview ? (
+            <>
+              This page is a preview.{" "}
+              <a
+                href="/api/exit-preview"
+                className="underline transition-colors duration-200 hover:text-teal-300"
+              >
+                Click here
+              </a>{" "}
+              to exit preview mode
+            </>
+          ) : (
+            <>
+              The source code for this blog is <a>available on GitHub</a>
+            </>
+          )}
+        </div>
+      </Container>
+    </div>
+  );
+}

components/Avatar.tsx

@@ -0,0 +1,15 @@
+// import Image from "next/image";
+
+type Props = {
+  name: string;
+  picture: string;
+};
+
+export function Avatar({ name, picture }: Props) {
+  return (
+    <div className="flex items-center">
+      <img src={picture} className="mr-4 h-12 w-12 rounded-full" alt={name} />
+      <div className="text-xl font-bold">{name}</div>
+    </div>
+  );
+}

components/Container.tsx

@@ -0,0 +1,7 @@
+type Props = {
+  children?: React.ReactNode;
+};
+
+export function Container({ children }: Props) {
+  return <div className="container mx-auto px-5">{children}</div>;
+}

components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Container } from "./container";
+import { Container } from "./Container";
 // import { EXAMPLE_PATH } from "@/lib/constants";
 
 export function Footer() {

components/Header.tsx

@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export function Header() {
+  return (
+    <h2 className="md:tracking-tigher mb-20 mt-8 flex items-center text-2xl font-bold leading-tight tracking-tight md:text-4xl">
+      <Link href="/" className="hover:underline">
+        Blog
+      </Link>
+    </h2>
+  );
+}

components/HeroPost.tsx

@@ -1,6 +1,6 @@
 import { Avatar } from "./Avatar";
 import { CoverImage } from "./CoverImage";
-import { type Author } from "../interfaces/author";
+import { type Author } from "interfaces/author";
 import Link from "next/link";
 import { DateFormatter } from "./DateFormatter";
 

components/Intro.tsx

@@ -0,0 +1,21 @@
+import { CMS_NAME } from "lib/constants";
+
+export function Intro() {
+  return (
+    <section className="mb-16 mt-16 flex flex-col items-center md:mb-12 md:flex-row md:justify-between">
+      <h1 className="text-5xl font-bold leading-tight tracking-tighter md:pr-8 md:text-8xl">
+        Blog
+      </h1>
+      <h4 className="mt-5 text-center text-lg md:pl-8 md:text-left">
+        A statically generated blog example using{" "}
+        <a
+          href=""
+          className="underline transition-colors duration-200 hover:text-blue-600"
+        >
+          Next.js
+        </a>{" "}
+        and {CMS_NAME}.
+      </h4>
+    </section>
+  );
+}