add: categories list

2025-07-07 16:19:57 +03:30
parent aca8509ad1
commit 1a6a7ef044
5 changed files with 159 additions and 6 deletions
@@ -0,0 +1,20 @@
+import React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function CategoryItemRenderer({ children, ...rest }: Props) {
+    return (
+        <div className={`${rest.className} transition-all duration-200 ease-out border-2 border-solid border-white overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
+            <div
+                {...rest}
+                className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default CategoryItemRenderer;
@@ -0,0 +1,33 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+type Props = {
+    itemRenderer?: (child: ReactNode, index: number) => ReactElement;
+    children: ReactNode;
+} & React.OlHTMLAttributes<HTMLUListElement>;
+
+function HorizontalScrollView({ itemRenderer, children, ...restProps }: Props) {
+    const items = React.Children.toArray(children);
+
+    return (
+        <ul
+            {...restProps}
+            style={{
+                display: 'flex',
+                overflowX: 'auto',
+                gap: '1rem',
+                padding: 0,
+                margin: 0,
+                listStyle: 'none',
+                ...restProps.style,
+            }}
+        >
+            {items.map((child, index) => (
+                <li key={index} style={{ flex: '0 0 auto' }}>
+                    {itemRenderer ? itemRenderer(child, index) : child}
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default HorizontalScrollView;