feat: add categories page

Author: pooriaset

public/assets/images/all-product.webp

@@ -0,0 +1,30 @@
+import { Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+
+export interface MenuCategoryItemProps {
+  name: string | null;
+  selected: boolean;
+  onClick: VoidFunction;
+}
+const MenuCategoryItem: FC<MenuCategoryItemProps> = ({
+  name,
+  selected,
+  onClick,
+}) => {
+  return (
+    <Stack
+      onClick={onClick}
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        height: 65,
+        backgroundColor: (theme) =>
+          selected ? theme.palette.background.default : theme.palette.grey[200],
+      }}
+    >
+      <Typography variant="body2">{name}</Typography>
+    </Stack>
+  );
+};
+
+export default MenuCategoryItem;

public/assets/images/sample-category.webp

@@ -0,0 +1,60 @@
+import { Link } from '@/navigation';
+import { ChevronRight } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+import SubCategoryItem from './SubCategoryItem';
+
+export interface SubCategoriesProps {
+  parentId: string | null;
+  name: string;
+  items: any[];
+}
+
+const SubCategories: FC<SubCategoriesProps> = ({ name, parentId, items }) => {
+  if (!parentId) {
+    return null;
+  }
+
+  return (
+    <Stack px={1.5} flexGrow={1}>
+      <Stack component={Link} href="#" height={65} justifyContent="center">
+        <Typography
+          variant="body2"
+          color="primary"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          مشاهده همه کالاهای {name}{' '}
+          <ChevronRight
+            fontSize="small"
+            sx={{
+              transform: (theme) =>
+                theme.direction === 'rtl' ? 'rotate(180deg)' : null,
+            }}
+          />
+        </Typography>
+      </Stack>
+      <Stack direction="row" px={1.5} flexWrap="wrap" gap={1}>
+        {items.map((item) => {
+          return (
+            <SubCategoryItem
+              src={item.image.sourceUrl}
+              name={item.name}
+              id={item.name}
+            />
+          );
+        })}
+
+        <SubCategoryItem
+          src={'/assets/images/all-product.webp'}
+          name={'همه کالاها'}
+          id={parentId}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SubCategories;

src/app/[locale]/(main)/categories/components/MenuCategoryItem.tsx

@@ -0,0 +1,53 @@
+import Image from '@/components/common/Image';
+import { Link } from '@/navigation';
+import { Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+
+export interface SubCategoryItemProps {
+  id: string;
+  name: string;
+  src: string;
+}
+const SubCategoryItem: FC<SubCategoryItemProps> = ({ id, src, name }) => {
+  return (
+    <Stack
+      spacing={1}
+      width="30%"
+      alignItems="center"
+      component={Link}
+      href="#"
+      sx={{
+        height: 'fit-content',
+        maxHeight: 'auto',
+      }}
+    >
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          bgcolor: (theme) => theme.palette.grey[200],
+          borderRadius: 1.5,
+          height: 'fit-content',
+        }}
+      >
+        <Image width={82} height={82} src={src} alt={name} />
+      </Stack>
+      <Typography
+        color="text.primary"
+        variant="body2"
+        sx={{
+          // whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          display: '-webkit-box',
+          '-webkit-line-clamp': '2',
+          '-webkit-box-orient': 'vertical',
+        }}
+      >
+        {name}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default SubCategoryItem;

src/app/[locale]/(main)/categories/components/SubCategories.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { GET_ALL_CATEGORIES_QUERY } from '@/graphql/queries/categories';
+import { CategoriesQuery } from '@/graphql/types/graphql';
+import { useQuery } from '@apollo/client';
+import { Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+import MenuCategoryItem from './components/MenuCategoryItem';
+import SubCategories from './components/SubCategories';
+
+const page = () => {
+  const { data, loading } = useQuery<CategoriesQuery>(
+    GET_ALL_CATEGORIES_QUERY,
+    {
+      variables: {
+        first: 10000,
+      },
+    },
+  );
+
+  const categories = data?.productCategories?.nodes || [];
+
+  const [selected, setSelected] = useState<any>(null);
+
+  useEffect(() => {
+    if (!loading) {
+      setSelected(categories[0]);
+    }
+  }, [loading]);
+
+  if (loading || !selected) {
+    return <>Loading</>;
+  }
+
+  return (
+    <Stack overflow="auto" direction="row">
+      <Stack
+        overflow="auto"
+        sx={{
+          minWidth: 110,
+        }}
+      >
+        {categories
+          .filter((category) => !category.parentId)
+          .map((category) => {
+            return (
+              <MenuCategoryItem
+                selected={category.id === selected.id}
+                {...category}
+                key={category.id}
+                onClick={() => setSelected(category)}
+              />
+            );
+          })}
+      </Stack>
+      <SubCategories
+        name={selected.name}
+        parentId={selected.id}
+        items={categories.filter(
+          (category) => category.parentId === selected.id,
+        )}
+      />
+    </Stack>
+  );
+};
+
+export default page;