danak/dkala-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

less space
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-20 10:46:11 +03:30
parent 0c8d132783
commit 4f3b97792d
2 changed files with 81 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/components/CategoryScroll.tsx
+13 -65
View File
@@ -19,17 +19,7 @@ const SVG_MASK_STYLE = {
WebkitMaskPosition: "center",
} as const;
function CategoryImage({
src,
size,
alt,
tintWithPrimary = true,
}: {
src: string;
size: number;
alt: string;
tintWithPrimary?: boolean;
}) {
function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string; size: number; alt: string; tintWithPrimary?: boolean }) {
const isSvg = src.endsWith(".svg");
const shouldUseSvgMask = isSvg && tintWithPrimary;
@@ -93,21 +83,11 @@ type Props = {
className?: string;
};
const CategoryScroll = ({
categories,
selectedCategory,
onSelect,
variant = "large",
className,
}: Props) => {
const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
const segment = usePathname()?.split("/").filter(Boolean)[0];
const usesColoredSvg =
segment != null &&
COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
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) ??
categories.find((c) => c.children?.some((ch) => ch.id === selectedCategory));
const selectedParent = categories.find((c) => c.id === selectedCategory) ?? categories.find((c) => c.children?.some((ch) => ch.id === selectedCategory));
const children = selectedParent?.children ?? [];
const handleSelect = (categoryId: string) => () => onSelect(categoryId);
@@ -118,63 +98,31 @@ const CategoryScroll = ({
className={clsx(
"w-full noscrollbar",
children.length > 0 ? "pt-4! pb-1!" : "py-4!",
variant === "large" && "mt-4!",
// variant === "large" && "mt-4!",
className,
)}
>
{categories.map((item) => {
const isSelected =
item.id === selectedCategory ||
item.children?.some((ch) => ch.id === selectedCategory);
const isSelected = item.id === selectedCategory || item.children?.some((ch) => ch.id === selectedCategory);
return (
<Renderer
key={item.id}
className={clsx(isSelected && "bg-container!")}
onClick={handleSelect(item.id)}
>
<CategoryImage
src={item.avatarUrl || "/assets/images/food-image.png"}
size={imageSize}
alt="category image"
tintWithPrimary={!usesColoredSvg}
/>
<span className="text-xs text-foreground text-center">
{item.title}
</span>
<Renderer key={item.id} className={clsx(isSelected && "bg-container!")} onClick={handleSelect(item.id)}>
<CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
<span className="text-xs text-foreground text-center">{item.title}</span>
</Renderer>
);
})}
</HorizontalScrollView>
{children.length > 0 && (
<HorizontalScrollView
className={clsx(
"w-full noscrollbar py-2!",
variant === "small" && "py-1!",
)}
>
<HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "small" && "py-1!")}>
{children.map((child) => {
const isChildSelected = child.id === selectedCategory;
return (
<CategorySmallItemRenderer
key={child.id}
compact
className={clsx(isChildSelected && "bg-container!")}
onClick={handleSelect(child.id)}
>
{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 key={child.id} compact className={clsx(isChildSelected && "bg-container!")} onClick={handleSelect(child.id)}>
{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>
);
})}