wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added icons to posts page

Browse Source
This commit is contained in:
Wyatt J. Miller 2024-12-02 23:35:15 -05:00
parent 899f94d4d2
commit ca238bd919
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/routes/posts/index.tsx
View File

@ -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} />