color icon

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -1,11 +1,70 @@
-'use client';
+"use client";
 
-import Image from "next/image";
-import clsx from "clsx";
-import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import { Category } from "@/app/[name]/(Main)/types/Types";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
-import { Category } from "@/app/[name]/(Main)/types/Types";
+import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import clsx from "clsx";
+import { usePathname } from "next/navigation";
+
+/** TODO: remove when backend sends avatarRenderMode */
+const COLORED_SVG_RESTAURANT_SLUGS = new Set(["havasone"]);
+
+const SVG_MASK_STYLE = {
+  maskSize: "contain",
+  maskRepeat: "no-repeat",
+  maskPosition: "center",
+  WebkitMaskSize: "contain",
+  WebkitMaskRepeat: "no-repeat",
+  WebkitMaskPosition: "center",
+} as const;
+
+function CategoryImage({
+  src,
+  size,
+  alt,
+  tintWithPrimary = true,
+}: {
+  src: string;
+  size: number;
+  alt: string;
+  tintWithPrimary?: boolean;
+}) {
+  const isSvg = src.endsWith(".svg");
+  const shouldUseSvgMask = isSvg && tintWithPrimary;
+
+  if (shouldUseSvgMask) {
+    return (
+      <div
+        className="shrink-0 bg-primary"
+        style={{
+          width: size,
+          height: size,
+          maskImage: `url(${src})`,
+          WebkitMaskImage: `url(${src})`,
+          ...SVG_MASK_STYLE,
+        }}
+        role="img"
+        aria-label={alt}
+      />
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      width={size}
+      height={size}
+      alt={alt}
+      loading="lazy"
+      className="shrink-0 object-contain"
+      onError={(event) => {
+        event.currentTarget.src = "/assets/images/food-image.png";
+      }}
+    />
+  );
+}
 
 type Variant = "large" | "small";
 
@@ -41,6 +100,10 @@ const CategoryScroll = ({
   variant = "large",
   className,
 }: Props) => {
+  const segment = usePathname()?.split("/").filter(Boolean)[0];
+  const usesColoredSvg =
+    segment != null &&
+    COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
   const { renderer: Renderer, imageSize } = variantConfig[variant];
   const selectedParent =
     categories.find((c) => c.id === selectedCategory) ??
@@ -53,9 +116,10 @@ const CategoryScroll = ({
     <div className="flex flex-col">
       <HorizontalScrollView
         className={clsx(
-          "w-full noscrollbar pt-4! pb-1!",
+          "w-full noscrollbar",
+          children.length > 0 ? "pt-4! pb-1!" : "py-4!",
           variant === "large" && "mt-4!",
-          className
+          className,
         )}
       >
         {categories.map((item) => {
@@ -69,14 +133,15 @@ const CategoryScroll = ({
               className={clsx(isSelected && "bg-container!")}
               onClick={handleSelect(item.id)}
             >
-              <Image
-                priority
+              <CategoryImage
                 src={item.avatarUrl || "/assets/images/food-image.png"}
-                width={imageSize}
-                height={imageSize}
+                size={imageSize}
                 alt="category image"
+                tintWithPrimary={!usesColoredSvg}
               />
-              <span className="text-xs text-foreground text-center">{item.title}</span>
+              <span className="text-xs text-foreground text-center">
+                {item.title}
+              </span>
             </Renderer>
           );
         })}
@@ -86,7 +151,7 @@ const CategoryScroll = ({
         <HorizontalScrollView
           className={clsx(
             "w-full noscrollbar py-2!",
-            variant === "small" && "py-1!"
+            variant === "small" && "py-1!",
           )}
         >
           {children.map((child) => {
@@ -95,10 +160,21 @@ const CategoryScroll = ({
             return (
               <CategorySmallItemRenderer
                 key={child.id}
+                compact
                 className={clsx(isChildSelected && "bg-container!")}
                 onClick={handleSelect(child.id)}
               >
-                <span className="text-[10px] text-foreground whitespace-nowrap">{child.title}</span>
+                {child.avatarUrl && (
+                  <CategoryImage
+                    src={child.avatarUrl}
+                    size={16}
+                    alt="category image"
+                    tintWithPrimary={!usesColoredSvg}
+                  />
+                )}
+                <span className="text-[10px] text-foreground whitespace-nowrap">
+                  {child.title}
+                </span>
               </CategorySmallItemRenderer>
             );
           })}
@@ -109,4 +185,3 @@ const CategoryScroll = ({
 };
 
 export default CategoryScroll;
-

src/components/listview/CategorySmallItemRenderer.tsx

@@ -4,14 +4,19 @@ import React from 'react';
 
 type Props = {
     children: React.ReactNode;
+    compact?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-function CategorySmallItemRenderer({ children, ...rest }: Props) {
+function CategorySmallItemRenderer({ children, compact = false, className, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
+        <div className={`${className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
             <div
                 {...rest}
-                className="rounded-normal flex flex-row justify-center items-center h-8 px-2 gap-2"
+                className={
+                    compact
+                        ? "rounded-normal flex flex-row justify-center items-center h-8 px-2 gap-2"
+                        : "rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
+                }
             >
                 {children}
             </div>