JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: categories styling

Browse Source
This commit is contained in:
John Costa
2025-07-18 11:27:26 +01:00
parent e74975a52a
commit e508f03abb
1 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/front/index.tsx
View File

@ -8,34 +8,30 @@ const CategoryColor: Record<
keyof ReturnType<SearchImageStore["categories"]>, keyof ReturnType<SearchImageStore["categories"]>,
string string
> = { > = {
contact: "bg-red-500", contact: "bg-orange-50",
location: "bg-green-500", location: "bg-red-50",
event: "bg-blue-500", event: "bg-purple-50",
note: "bg-purple-500", note: "bg-green-50",
}; };
export const Categories: Component = () => { export const Categories: Component = () => {
const { categories } = useSearchImageContext(); const { categories } = useSearchImageContext();
createEffect(() => {
console.log(categories());
});
return ( return (
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-2"> <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())}> <For each={Object.entries(categories())}>
{([category, group]) => ( {([category, group]) => (
<div <div
class={ class={
"col-span-2 flex flex-col " + "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] + CategoryColor[category as keyof typeof CategoryColor] +
" " + " " +
(group.length === 0 ? "row-span-1 order-10" : "row-span-2") (group.length === 0 ? "row-span-1 order-10" : "row-span-2")
} }
> >
<p class="uppercase"> <p class="text-xl font-bold">{category}s</p>
{category}: {group.length} <p class="text-lg">{group.length}</p>
</p>
</div> </div>
)} )}
</For> </For>