44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { createSignal, Show } from "solid-js";
|
|
import { A } from "@solidjs/router";
|
|
import LoadingSpinner from "~/components/LoadingSpinner";
|
|
|
|
export interface CardLinksProps {
|
|
postTitle: string;
|
|
postID: number;
|
|
privilegeLevel: string;
|
|
}
|
|
|
|
export default function CardLinks(props: CardLinksProps) {
|
|
const [readLoading, setReadLoading] = createSignal(false);
|
|
const [editLoading, setEditLoading] = createSignal(false);
|
|
|
|
return (
|
|
<div class="flex flex-col">
|
|
<A
|
|
href={`/blog/${props.postTitle}`}
|
|
onClick={() => setReadLoading(true)}
|
|
class={`${
|
|
readLoading() ? "bg-zinc-400" : "bg-lavender hover:brightness-125"
|
|
} mx-auto mb-1 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
|
|
>
|
|
<Show when={readLoading()} fallback="Read">
|
|
<LoadingSpinner height={24} width={24} />
|
|
</Show>
|
|
</A>
|
|
<Show when={props.privilegeLevel === "admin"}>
|
|
<A
|
|
href={`/blog/edit/${props.postID}`}
|
|
onClick={() => setEditLoading(true)}
|
|
class={`${
|
|
editLoading() ? "bg-zinc-400" : "bg-green-400 hover:bg-green-500"
|
|
} mx-auto flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
|
|
>
|
|
<Show when={editLoading()} fallback="Edit">
|
|
<LoadingSpinner height={24} width={24} />
|
|
</Show>
|
|
</A>
|
|
</Show>
|
|
</div>
|
|
);
|
|
}
|