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

import { getQueryClient } from '@/utils';

import { getProduct, postRecommendations } from '@/api';

import Loading from './loading';

const Product = async ({

  params,

}: {

  params: { shop: string; item: string };

}) => {

  const { shop, item } = params;

  const queryClient = getQueryClient();

  try {

    await Promise.all([

      queryClient.prefetchQuery({

        queryKey: ['catalog', shop, item],

        queryFn: () => getProduct(shop, item),

      }),

      queryClient.prefetchQuery({

        queryKey: ['promo', shop, item],

        queryFn: () =>

          postRecommendations({

            shop: shop || '',

            currentItem: item || '',

          }),

      }),

    ]);

  } catch (error) {

    console.error('Error prefetching data:', error);

  }

  const dehydratedState = dehydrate(queryClient);

  return (

    <Suspense fallback={<Loading />}>

      <HydrationBoundary state={dehydratedState}>

        <ProductPage item={item} shop={shop} />

      </HydrationBoundary>

    </Suspense>

  );

};

export default Product;

export * from './product-card-bottom-content';

'use client';

import { FC } from 'react';

import { formatPrice, parseToInt } from '@/utils';

import * as Styled from './styled';

interface ProductCardBottomContentProps {

  price: string;

}

export const ProductCardBottomContent: FC<ProductCardBottomContentProps> = ({

  price,

}) => (

  <Styled.ProductCardBottomContent>

    <Styled.Price>{formatPrice(parseToInt(price))}</Styled.Price>

  </Styled.ProductCardBottomContent>

);

import styled from 'styled-components';

export const ProductCardBottomContent = styled.div`

  display: flex;

  justify-content: flex-end;

  padding: 4px 10px 2px;

`;

export const Price = styled.span`

  font-family: ${(props) => props.theme.fonts};

  font-size: 10px;

  font-weight: 600;

  line-height: 14px;

  color: var(--white);

`;