65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { Show, Suspense } from "solid-js";
|
|
import { useSearchParams, A } from "@solidjs/router";
|
|
import { Title } from "@solidjs/meta";
|
|
import { createAsync } from "@solidjs/router";
|
|
import { api } from "~/lib/api";
|
|
import PostSortingSelect from "~/components/blog/PostSortingSelect";
|
|
import TagSelector from "~/components/blog/TagSelector";
|
|
import PostSorting from "~/components/blog/PostSorting";
|
|
import { TerminalSplash } from "~/components/TerminalSplash";
|
|
|
|
export default function BlogIndex() {
|
|
const [searchParams] = useSearchParams();
|
|
|
|
const sort = () => searchParams.sort || "newest";
|
|
const filters = () => searchParams.filter || "";
|
|
|
|
const data = createAsync(() => api.blog.getPosts.query());
|
|
|
|
return (
|
|
<>
|
|
<Title>Blog | Michael Freno</Title>
|
|
|
|
<div class="mx-auto pt-8 pb-24">
|
|
<Suspense fallback={<TerminalSplash />}>
|
|
<div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
|
|
<PostSortingSelect />
|
|
|
|
<Show when={data() && Object.keys(data()!.tagMap).length > 0}>
|
|
<TagSelector tagMap={data()!.tagMap} />
|
|
</Show>
|
|
|
|
<Show when={data()?.privilegeLevel === "admin"}>
|
|
<div class="mt-2 flex justify-center md:mt-0 md:justify-end">
|
|
<A
|
|
href="/blog/create"
|
|
class="border-text rounded border px-4 py-2 transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
|
|
>
|
|
Create Post
|
|
</A>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</Suspense>
|
|
|
|
<Suspense fallback={<TerminalSplash />}>
|
|
<Show
|
|
when={data() && data()!.posts.length > 0}
|
|
fallback={<div class="pt-12 text-center">No posts yet!</div>}
|
|
>
|
|
<div class="mx-auto flex w-11/12 flex-col pt-8">
|
|
<PostSorting
|
|
posts={data()!.posts}
|
|
tags={data()!.tags}
|
|
privilegeLevel={data()!.privilegeLevel}
|
|
filters={filters()}
|
|
sort={sort()}
|
|
/>
|
|
</div>
|
|
</Show>
|
|
</Suspense>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|