From ca238bd91984279a65cba2227cbef5ff1ceae5f1 Mon Sep 17 00:00:00 2001
From: "Wyatt J. Miller" <wyatt@wyattjmiller.com>
Date: Mon, 2 Dec 2024 23:35:15 -0500
Subject: [PATCH] added icons to posts page

---
 frontend/routes/posts/index.tsx | 45 +++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/routes/posts/index.tsx b/frontend/routes/posts/index.tsx
index a9a3e83..ee2d345 100644
--- a/frontend/routes/posts/index.tsx
+++ b/frontend/routes/posts/index.tsx
@@ -2,6 +2,7 @@ import { PostCarousel } from "../../components/PostCarousel.tsx";
 
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { Post } from "../../components/PostCard.tsx";
+import * as hi from "jsr:@preact-icons/hi2";
 
 interface PageData {
   featuredPosts: Post[];
@@ -45,37 +46,49 @@ export default function PostPage({ data }: PageProps<PageData>) {
     <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-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">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineSparkles />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Featured Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic text-white text-center flex">
           Ignite the impossible
         </div>
         <PostCarousel posts={featuredPosts} />
       </section>
       <section>
-        <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">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineClock />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Recent Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
           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">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineFire />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Hot Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
           Making chaos look cool since forever
         </div>
         <PostCarousel posts={hotPosts} />
       </section>
       <section>
-        <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">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineBolt />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Popular Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
           Content may cause uncontrollable reading
         </div>
         <PostCarousel posts={popularPosts} />