Catalog | feat: add catalog 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 { CatalogPage } from '@/page';

import { getQueryClient } from '@/utils';

import { getCatalog } from '@/api';

import Loading from './loading';

const Catalog = async ({

  params,

}: {

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

}) => {

  const { shop, category } = params;

  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({

    queryKey: ['catalog', shop],

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

  });

  const dehydratedState = dehydrate(queryClient);

  return (

    <HydrationBoundary state={dehydratedState}>

      <Suspense fallback={<Loading />}>

        <CatalogPage category={category} shop={shop} />

      </Suspense>

    </HydrationBoundary>

  );

};

export default Catalog;

'use client';

import { FC } from 'react';

import { MenuCategory } from '@/interfaces';

import { CatalogTabs, CatalogCategoriesList } from './ui';

import * as Styled from './styled';

interface ICatalogProps {

  shopName: string;

  categories: MenuCategory[];

  colorItem?: string;

  selectedTab: number;

  handleTabClick: (id: number) => void;

}

export const Catalog: FC<ICatalogProps> = ({

  shopName,

  categories,

  colorItem,

  selectedTab,

  handleTabClick,

}) => (

  <Styled.Catalog>

    <CatalogTabs

      categories={categories}

      colorItem={colorItem}

      selectedTab={selectedTab}

      onClick={handleTabClick}

    />

    <CatalogCategoriesList

      categories={categories}

      colorItem={colorItem}

      selectedTab={selectedTab}

      shopName={shopName || ''}

    />

  </Styled.Catalog>

);

export * from './catalog';

import styled from 'styled-components';

import { devices } from '@/styles';

export const Catalog = styled.div`

  position: sticky;

  height: 100%;

  padding-top: 12px;

  -ms-overflow-style: none;

  scrollbar-width: none;

  &::-webkit-scrollbar {

    display: none;

  }

  @media ${devices.tablet} {

    position: static;

    min-height: 100vh;

  }

`;