added icons to posts page

This commit is contained in:
Wyatt J. Miller 2024-12-02 23:35:15 -05:00
parent 899f94d4d2
commit ca238bd919

View File

@ -2,6 +2,7 @@ import { PostCarousel } from "../../components/PostCarousel.tsx";
import { Handlers, PageProps } from "$fresh/server.ts"; import { Handlers, PageProps } from "$fresh/server.ts";
import { Post } from "../../components/PostCard.tsx"; import { Post } from "../../components/PostCard.tsx";
import * as hi from "jsr:@preact-icons/hi2";
interface PageData { interface PageData {
featuredPosts: Post[]; featuredPosts: Post[];
@ -45,37 +46,49 @@ export default function PostPage({ data }: PageProps<PageData>) {
<div class="space-y-12 px-10 py-8 bg-[#313244]"> <div class="space-y-12 px-10 py-8 bg-[#313244]">
<h1 class="text-3xl text-white font-bold uppercase text-center">Blog</h1> <h1 class="text-3xl text-white font-bold uppercase text-center">Blog</h1>
<section> <section>
<h2 class="text-2xl font-bold mb-2 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 Featured Posts
</h2> </h2>
<div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left"> </div>
<div className="text-lg font-thin italic text-white text-center flex">
Ignite the impossible Ignite the impossible
</div> </div>
<PostCarousel posts={featuredPosts} /> <PostCarousel posts={featuredPosts} />
</section> </section>
<section> <section>
<h2 class="text-2xl font-bold mb-2 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 Recent Posts
</h2> </h2>
<div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left"> </div>
<div className="text-lg font-thin italic mb-4 text-white text-center flex">
Now with 100% fresh perspective Now with 100% fresh perspective
</div> </div>
<PostCarousel posts={recentPosts} /> <PostCarousel posts={recentPosts} />
</section> </section>
<section> <section>
<h2 class="text-2xl font-bold mb-2 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 Hot Posts
</h2> </h2>
<div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left"> </div>
<div className="text-lg font-thin italic mb-4 text-white text-center flex">
Making chaos look cool since forever Making chaos look cool since forever
</div> </div>
<PostCarousel posts={hotPosts} /> <PostCarousel posts={hotPosts} />
</section> </section>
<section> <section>
<h2 class="text-2xl font-bold mb-2 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 Popular Posts
</h2> </h2>
<div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left"> </div>
<div className="text-lg font-thin italic mb-4 text-white text-center flex">
Content may cause uncontrollable reading Content may cause uncontrollable reading
</div> </div>
<PostCarousel posts={popularPosts} /> <PostCarousel posts={popularPosts} />