From 1a6a7ef0444e6a9e7b11857ff52e1f4dc301136a Mon Sep 17 00:00:00 2001 From: Mahyar Khanbolooki Date: Mon, 7 Jul 2025 16:19:57 +0330 Subject: [PATCH] add: categories list --- public/assets/images/food-image.png | Bin 0 -> 8420 bytes src/app/globals.css | 33 ++++++++ src/app/menu/page.tsx | 79 ++++++++++++++++-- .../listview/CategoryItemRenderer.tsx | 20 +++++ .../listview/HorizontalScrollView.tsx | 33 ++++++++ 5 files changed, 159 insertions(+), 6 deletions(-) create mode 100644 public/assets/images/food-image.png create mode 100644 src/components/listview/CategoryItemRenderer.tsx create mode 100644 src/components/listview/HorizontalScrollView.tsx diff --git a/public/assets/images/food-image.png b/public/assets/images/food-image.png new file mode 100644 index 0000000000000000000000000000000000000000..35dc7f1b50adfaa61194c7d6be5617df85958476 GIT binary patch literal 8420 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 => { + setSearch(e.target.value); + }, []); + + const updateCategory = useCallback((id: number) => { + setSelectedCategory(id); + }, []); - const updateSearch = (e: React.ChangeEvent) => { - if (e) { - setSearch(() => e.target.value); - } - } return (
+ { + return updateCategory(index)} key={index}>{child} + }}> + {categories.map((item, index) => { + return ( +
+ category image + {item.title} +
+ ) + })} +
); } diff --git a/src/components/listview/CategoryItemRenderer.tsx b/src/components/listview/CategoryItemRenderer.tsx new file mode 100644 index 0000000..c4e1fe7 --- /dev/null +++ b/src/components/listview/CategoryItemRenderer.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +type Props = { + children: React.ReactNode; +} & React.HTMLAttributes; + +function CategoryItemRenderer({ children, ...rest }: Props) { + return ( +
+
+ {children} +
+
+ ); +} + +export default CategoryItemRenderer; diff --git a/src/components/listview/HorizontalScrollView.tsx b/src/components/listview/HorizontalScrollView.tsx new file mode 100644 index 0000000..d592115 --- /dev/null +++ b/src/components/listview/HorizontalScrollView.tsx @@ -0,0 +1,33 @@ +import React, { ReactElement, ReactNode } from 'react'; + +type Props = { + itemRenderer?: (child: ReactNode, index: number) => ReactElement; + children: ReactNode; +} & React.OlHTMLAttributes; + +function HorizontalScrollView({ itemRenderer, children, ...restProps }: Props) { + const items = React.Children.toArray(children); + + return ( +
    + {items.map((child, index) => ( +
  • + {itemRenderer ? itemRenderer(child, index) : child} +
  • + ))} +
+ ); +} + +export default HorizontalScrollView;