45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { Component, createEffect, For } from "solid-js";
|
|
import {
|
|
SearchImageStore,
|
|
useSearchImageContext,
|
|
} from "../contexts/SearchImageContext";
|
|
|
|
const CategoryColor: Record<
|
|
keyof ReturnType<SearchImageStore["categories"]>,
|
|
string
|
|
> = {
|
|
contact: "bg-red-500",
|
|
location: "bg-green-500",
|
|
event: "bg-blue-500",
|
|
note: "bg-purple-500",
|
|
};
|
|
|
|
export const Categories: Component = () => {
|
|
const { categories } = useSearchImageContext();
|
|
|
|
createEffect(() => {
|
|
console.log(categories());
|
|
});
|
|
|
|
return (
|
|
<div class="w-full grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] auto-rows-[minmax(100px,1fr)] grid-flow-col gap-2">
|
|
<For each={Object.entries(categories())}>
|
|
{([category, group]) => (
|
|
<div
|
|
class={
|
|
"col-span-2 flex flex-col " +
|
|
CategoryColor[category as keyof typeof CategoryColor] +
|
|
" " +
|
|
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
|
|
}
|
|
>
|
|
<p class="uppercase">
|
|
{category}: {group.length}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
);
|
|
};
|