code dump frontend

frontend/routes/posts/index.tsx

@@ -1,61 +1,37 @@
-// import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
-import { PostCarousel } from "../../islands/PostCarousel.tsx";
-
-// export interface PostItems {
-//   title: string;
-//   author: string;
-//   publish_date: string;
-//   truncated_content: string;
-// }
-//
-// export interface PostReponse {
-//   new_posts: Array<PostItems>;
-//   popular_posts: Array<PostItems>;
-//   hot_posts: Array<PostItems>;
-// }
-//
-// export interface PostResponseOne {
-//   post_id: number;
-//   first_name: string;
-//   last_name: string;
-//   title: string;
-//   body: string;
-//   created_at: string;
-// }
-//
-// export const handler: Handlers<Array<PostCard>> = {
-//   GET(_req: Request, ctx: FreshContext) {
-//     const results = fetch(`${Deno.env.get("BASE_URI")}/posts/all`);
-//     return ctx.render(results.then((resp) => resp.json()));
-//   },
-// };
+import { PostCarousel } from "../../components/PostCarousel.tsx";
 
 import { Handlers, PageProps } from "$fresh/server.ts";
-import { Post } from "../../islands/PostCard.tsx";
+import { Post } from "../../components/PostCard.tsx";
 
 interface PageData {
   featuredPosts: Post[];
+  recentPosts: Post[];
   hotPosts: Post[];
   popularPosts: Post[];
 }
 
 export const handler: Handlers<PageData> = {
   async GET(_: any, ctx: any) {
-    const [featuredResult, hotResult, popularResult] = await Promise.all([
-      fetch(`${Deno.env.get("BASE_URI")}/posts/all`),
-      fetch(`${Deno.env.get("BASE_URI")}/posts/hot`),
-      fetch(`${Deno.env.get("BASE_URI")}/posts/popular`),
-    ]);
+    const [featuredResult, recentResult, hotResult, popularResult] =
+      await Promise.all([
+        fetch(`${Deno.env.get("BASE_URI_API")}/posts/featured`),
+        fetch(`${Deno.env.get("BASE_URI_API")}/posts/recent`),
+        fetch(`${Deno.env.get("BASE_URI_API")}/posts/hot`),
+        fetch(`${Deno.env.get("BASE_URI_API")}/posts/popular`),
+      ]);
 
-    // Parse all JSON responses concurrently
-    const [featuredPosts, hotPosts, popularPosts] = await Promise.all([
-      featuredResult.json(),
-      hotResult.json(),
-      popularResult.json(),
-    ]);
+    // parse all JSON responses concurrently
+    const [featuredPosts, recentPosts, hotPosts, popularPosts] = await Promise
+      .all([
+        featuredResult.json(),
+        recentResult.json(),
+        hotResult.json(),
+        popularResult.json(),
+      ]);
 
     return ctx.render({
       featuredPosts,
+      recentPosts,
       hotPosts,
       popularPosts,
     });
@@ -63,20 +39,45 @@ export const handler: Handlers<PageData> = {
 };
 
 export default function PostPage({ data }: PageProps<PageData>) {
-  const { featuredPosts, hotPosts, popularPosts } = data;
+  const { featuredPosts, recentPosts, hotPosts, popularPosts } = data;
 
   return (
-    <div class="space-y-12 py-8">
+    <div class="space-y-12 px-10 py-8 bg-[#313244]">
+      <h1 class="text-3xl text-white font-bold uppercase text-center">Blog</h1>
       <section>
-        <h2 class="text-2xl font-bold mb-4">Featured Posts</h2>
+        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
+          Featured Posts
+        </h2>
+        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+          Ignite the impossible
+        </div>
         <PostCarousel posts={featuredPosts} />
       </section>
       <section>
-        <h2 class="text-2xl font-bold mb-4">Recent Posts</h2>
+        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
+          Recent Posts
+        </h2>
+        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+          Now with 100% fresh perspective
+        </div>
+        <PostCarousel posts={recentPosts} />
+      </section>
+      <section>
+        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
+          Hot Posts
+        </h2>
+        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+          Making chaos look cool since forever
+        </div>
         <PostCarousel posts={hotPosts} />
       </section>
       <section>
-        <h2 class="text-2xl font-bold mb-4">Popular Posts</h2>
+        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
+          Popular Posts
+        </h2>
+        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+          Content may cause uncontrollable reading
+        </div>
         <PostCarousel posts={popularPosts} />
       </section>
     </div>