feat: showing the lists which an image is a part of

frontend/src/components/list-card/index.tsx

@@ -0,0 +1,35 @@
+import { List } from "@network/index";
+import { Component } from "solid-js";
+import fastHashCode from "../../utils/hash";
+import { A } from "@solidjs/router";
+
+const colors = [
+	"bg-emerald-50",
+	"bg-lime-50",
+
+	"bg-indigo-50",
+	"bg-sky-50",
+
+	"bg-amber-50",
+	"bg-teal-50",
+
+	"bg-fuchsia-50",
+	"bg-pink-50",
+];
+
+export const ListCard: Component<{ list: List }> = (props) => {
+	return (
+		<A
+			href={`/list/${props.list.ID}`}
+			class={
+				"flex flex-col p-4 border border-neutral-200 rounded-lg " +
+				colors[
+					fastHashCode(props.list.Name, { forcePositive: true }) % colors.length
+				]
+			}
+		>
+			<p class="text-xl font-bold">{props.list.Name}</p>
+			<p class="text-lg">{props.list.Images.length}</p>
+		</A>
+	);
+};