44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { Component, For } from "solid-js";
|
|
import { A } from "@solidjs/router";
|
|
import {
|
|
SearchImageStore,
|
|
useSearchImageContext,
|
|
} from "@contexts/SearchImageContext";
|
|
|
|
// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
|
|
const CategoryColor: Record<
|
|
keyof ReturnType<SearchImageStore["categories"]>,
|
|
string
|
|
> = {
|
|
contact: "bg-orange-50",
|
|
location: "bg-red-50",
|
|
event: "bg-purple-50",
|
|
note: "bg-green-50",
|
|
};
|
|
|
|
export const Categories: Component = () => {
|
|
const { categories } = useSearchImageContext();
|
|
|
|
return (
|
|
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
|
|
<For each={Object.entries(categories())}>
|
|
{([category, group]) => (
|
|
<A
|
|
href={`/gallery/${category}`}
|
|
class={
|
|
"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
|
|
"capitalize " +
|
|
CategoryColor[category as keyof typeof CategoryColor] +
|
|
" " +
|
|
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
|
|
}
|
|
>
|
|
<p class="text-xl font-bold">{category}s</p>
|
|
<p class="text-lg">{group.length}</p>
|
|
</A>
|
|
)}
|
|
</For>
|
|
</div>
|
|
);
|
|
};
|