Merge pull request #2 from tkokhing/postgen

major revamp to components housekeep

Author: tkokhing

src/app/_components/all-stories-title.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { Post } from "@/interfaces/post";
+import { TitlePreview } from "../title-preview";
+
+type Props = {
+  posts: Post[];
+};
+
+export function AllStoriesTitle({ posts }: Props) {
+  const [sortBy, setSortBy] = useState<"title" | "date">("title");
+
+  const sortedPosts = [...posts].sort((a, b) => {
+    if (sortBy === "title") {
+      return a.title.localeCompare(b.title);
+    } else {
+      return new Date(b.date).getTime() - new Date(a.date).getTime();
+    }
+  });
+
+  return (
+    <section>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-4xl md:text-6xl font-thin tracking-tighter leading-tight">
+          Browse by {sortBy === "title" ? "Title (A–Z)" : "Date (Newest)"}
+        </h2>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setSortBy("title")}
+            disabled={sortBy === "title"}
+            className={`px-3 py-1 rounded transition ${
+              sortBy === "title"
+                ? "bg-gray-700 dark:bg-gray-600 text-tkokhing-blue cursor-default"
+                : "bg-gray-200 hover:bg-gray-500 dark:text-tkokhing-blue hover:text-tkokhing-dark hover:dark:text-tkokhing-dark"
+            }`}
+          >
+            A–Z
+          </button>
+          <button
+            onClick={() => setSortBy("date")}
+            disabled={sortBy === "date"}
+            className={`px-3 py-1 rounded transition ${
+              sortBy === "date"
+                ? "bg-gray-700 dark:bg-gray-600 text-tkokhing-blue cursor-default"
+                : "bg-gray-200 hover:bg-gray-500 dark:text-tkokhing-blue hover:text-tkokhing-dark hover:dark:text-tkokhing-dark"
+            }`}
+          >
+            Date
+          </button>
+        </div>
+      </div>
+
+      <div>
+        {sortedPosts.map((post) => (
+          <TitlePreview
+            key={post.slug}
+            title={post.title}
+            date={post.date}
+            slug={post.slug}
+            subPath={post.subPath}
+            postStatus={post.postStatus}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/_components/post_gen/all-stories-title.tsx

@@ -2,7 +2,7 @@ import Avatar from "@/app/_components/avatar";
 import CoverImage from "@/app/_components/cover-image";
 import { type Author } from "@/interfaces/author";
 import Link from "next/link";
-import DateFormatter from "./date-formatter";
+import DateFormatter from "../date-formatter";
 
 type Props = {
   title: string;

src/app/_components/hero-post.tsx …c/app/_components/post_gen/hero-post.tsxsrc/app/_components/hero-post.tsx renamed to src/app/_components/post_gen/hero-post.tsx src/app/_components/hero-post.tsx renamed to src/app/_components/post_gen/hero-post.tsx

@@ -2,7 +2,7 @@ import { MDXRemote } from 'next-mdx-remote/rsc';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import remarkGfm from 'remark-gfm';
-import PostBodyClient from '@/app/_components/post-body-client'; // 👈 import client wrapper
+import PostBodyClient from '@/app/_components/post_gen/post-body-client'; // 👈 import client wrapper
 
 type Props = {
   content: string;

src/app/_components/more-stories.tsx …pp/_components/post_gen/more-stories.tsxsrc/app/_components/more-stories.tsx renamed to src/app/_components/post_gen/more-stories.tsx src/app/_components/more-stories.tsx renamed to src/app/_components/post_gen/more-stories.tsx

@@ -1,7 +1,7 @@
-import Avatar from "./avatar";
-import CoverImage from "./cover-image";
-import DateFormatter from "./date-formatter";
-import { PostTitle } from "@/app/_components/post-title";
+import Avatar from "../avatar";
+import CoverImage from "../cover-image";
+import DateFormatter from "../date-formatter";
+import { PostTitle } from "@/app/_components/post_gen/post-title";
 import { type Author } from "@/interfaces/author";
 
 type Props = {

src/app/_components/post-body-client.tsx …components/post_gen/post-body-client.tsxsrc/app/_components/post-body-client.tsx renamed to src/app/_components/post_gen/post-body-client.tsx src/app/_components/post-body-client.tsx renamed to src/app/_components/post_gen/post-body-client.tsx

@@ -1,8 +1,8 @@
 import { type Author } from "@/interfaces/author";
 import Link from "next/link";
-import Avatar from "./avatar";
-import CoverImage from "./cover-image";
-import DateFormatter from "./date-formatter";
+import Avatar from "../avatar";
+import CoverImage from "../cover-image";
+import DateFormatter from "../date-formatter";
 
 type Props = {
   title: string;

src/app/_components/post-body.tsx …c/app/_components/post_gen/post-body.tsxsrc/app/_components/post-body.tsx renamed to src/app/_components/post_gen/post-body.tsx src/app/_components/post-body.tsx renamed to src/app/_components/post_gen/post-body.tsx

@@ -1,7 +1,7 @@
 import Container from "@/app/_components/container";
 import { getAllPosts } from "@/lib/api";
-import { HeroPost } from "@/app/_components/hero-post";
-import { MoreStories } from "@/app/_components/more-stories";
+import { HeroPost } from "@/app/_components/post_gen/hero-post";
+import { MoreStories } from "@/app/_components/post_gen/more-stories";
 
 export default function Index() {
   const allPosts = getAllPosts("_posts");