FrostByte/client-solid/src/Components/Posts.tsx

27 lines
759 B
TypeScript

import { For, JSXElement, Show, createSignal } from "solid-js";
import { loadSpinner } from "../Util/Icons";
import { Post, getPosts } from "../Util/api";
import { PostSegment } from "./PostSegment";
/**
* Posts is a component that displays a collection of posts.
* @returns {JSXElement} A JSXElement that contains a collection of posts.
*/
export function Posts(): JSXElement {
const [posts, setPosts] = createSignal([] as Post[]);
const [loading, setLoading] = createSignal(true);
getPosts().then((posts) => {
setPosts(posts);
setLoading(false);
});
return (
<Show when={!loading()} fallback={loadSpinner()}>
<For each={posts()}>
{(post): JSXElement => <PostSegment post={post} />}
</For>
</Show>
);
}