Catalog | feat: add category page

'use client';

import { Preloader } from '@/vendor';

const Loading = () => {

  return <Preloader colorItem="" />;

};

export default Loading;

import { HydrationBoundary, dehydrate } from '@tanstack/react-query';

import { Suspense } from 'react';

import { CategoryPage } from '@/page';

import { getQueryClient } from '@/utils';

import { getCatalog } from '@/api';

import Loading from './loading';

const Category = ({

  params,

}: {

  params: { shop: string; category: string; indexCategoryParam: string };

}) => {

  const { shop, category, indexCategoryParam } = params;

  const queryClient = getQueryClient();

  queryClient.prefetchQuery({

    queryKey: ['catalog', shop],

    queryFn: async () => getCatalog(shop),

  });

  const dehydratedState = dehydrate(queryClient);

  return (

    <Suspense fallback={<Loading />}>

      <HydrationBoundary state={dehydratedState}>

        <CategoryPage

          indexCategoryParam={indexCategoryParam}

          indexTabParam={category}

          shop={shop}

        />

      </HydrationBoundary>

    </Suspense>

  );

};

export default Category;

'use client';

import { FC } from 'react';

import { MenuList } from '@/interfaces';

import { BackGroup } from '@/shared';

import * as Styled from './styled';

import { CategoryProductsList } from './ui';

interface ICategoryProps {

  category: MenuList | null;

  shop: string;

  handleBackClick: () => void;

  colorItem: string;

}

export const Category: FC<ICategoryProps> = ({

  category,

  shop,

  handleBackClick,

  colorItem,

}) => (

  <Styled.CategoryPage $colorItem={colorItem}>

    <Styled.CategoryHeaderWrapper>

      <BackGroup

        handleBackClick={handleBackClick}

        title={category?.name || ''}

      />

    </Styled.CategoryHeaderWrapper>

    <CategoryProductsList products={category?.items || []} shop={shop || ''} />

  </Styled.CategoryPage>

);

export * from './categoty';

import styled from 'styled-components';

import { devices } from '@/styles';

interface CategoryPageProps {

  $colorItem?: string;

}

export const CategoryPage = styled.div<CategoryPageProps>`

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  height: 897px;

  overflow-y: auto;

  background-color: ${({ $colorItem }) => $colorItem || 'var(--black)'};

  -ms-overflow-style: none;

  scrollbar-width: none;

  &::-webkit-scrollbar {

    display: none;

  }

  @media ${devices.desktopMd} {

    height: 789px;

  }

  @media ${devices.desktop} {

    width: 361px;

    height: 656px;

  }

  @media ${devices.tablet} {

    width: 100%;

    height: 100vh;

  }

`;

export const CategoryHeaderWrapper = styled.div`

  display: flex;

  flex-direction: row;

  gap: 12px;

  align-items: center;

  justify-content: flex-start;

  margin: 20px;

`;