added blog post page, reverted back to flex blog landing, added types

frontend/components/AuthorCard.tsx

@@ -34,11 +34,3 @@ export default function AuthorCard({
     </div>
   );
 }
-
-export type Author = {
-  author_id: number;
-  first_name: string;
-  last_name: string;
-  bio: string;
-  image?: string;
-};

frontend/components/Footer.tsx

@@ -43,12 +43,6 @@ export default function Footer() {
                 Email me
               </div>
             </a>
-            <a
-              class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
-              href="https://x.com/wymillerlinux"
-            >
-              <div class="flex items-center gap-2">X (Twitter)</div>
-            </a>
             <a
               class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
               href="https://github.com/wymillerlinux"

frontend/components/PostBody.tsx

@@ -0,0 +1,11 @@
+import { Post } from "../types/index.ts";
+
+export const PostBody = function PostBody({ post }: PostBodyOpts) {
+  return (
+    <div class="p-6 bg-[#313244] shadow-md text-[#f5e0dc]">{post.body}</div>
+  );
+};
+
+export type PostBodyOpts = {
+  post: Post;
+};

frontend/components/PostCard.tsx

@@ -1,10 +1,11 @@
 import { convertUtc } from "../lib/convertUtc.ts";
 import { truncateString } from "../lib/truncate.ts";
+import { Post } from "../types/index.ts";
 
 export const PostCard = function PostCard({ post }: { post: Post }) {
   return (
     <div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
-      <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.slug}`}>
+      <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
         <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
         <p class="text-white">
           Written by{" "}
@@ -21,14 +22,3 @@ export const PostCard = function PostCard({ post }: { post: Post }) {
     </div>
   );
 };
-
-export type Post = {
-  post_id: number;
-  author_id: number;
-  first_name: string;
-  last_name: string;
-  title: string;
-  body: string;
-  created_at: string;
-  slug: string;
-};

frontend/components/PostCarousel.tsx

@@ -1,4 +1,5 @@
-import { Post, PostCard } from "./PostCard.tsx";
+import { PostCard } from "./PostCard.tsx";
+import { Post } from "../types/index.ts";
 
 interface PostOpts {
   posts: Post[];
@@ -6,9 +7,9 @@ interface PostOpts {
 
 export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
   return (
-    <div className="flex w-full bg-[#313244] p-8">
-      <div className="items-center justify-center">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-7xl w-full">
+    <div className="flex w-full justify-start items-start bg-[#313244] p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-wrap justify-center gap-3">
           {posts.map((post: Post) => (
             <PostCard key={post.post_id} post={post} />
           ))}

frontend/components/PostHeader.tsx

@@ -0,0 +1,26 @@
+import { Post } from "../types/index.ts";
+import { convertUtc } from "../lib/convertUtc.ts";
+
+export const PostHeader = function PostHeader({ post }: PostHeaderOpts) {
+  return (
+    <div class="p-6 bg-[#313244] shadow-md">
+      <div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
+        <div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
+          <div class="space-y-2 text-center md:text-left">
+            <p class="text-2xl text-[#f5e0dc] font-bold sm:text-4xl">
+              {post.title}
+            </p>
+            <p class="text-md font-medium text-[#E39A9C] sm:text-xl italic">
+              by {post.first_name} {post.last_name} posted on{" "}
+              {convertUtc(post.created_at)}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type PostHeaderOpts = {
+  post: Post;
+};