Fix Mobile container in /catalog and /catalog/<code>

package.json

@@ -22,6 +22,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
+    "react-image": "^4.1.0",
     "react-imask": "^7.5.0",
     "valtio": "^1.13.0",
     "zod": "^3.22.4"

src/components/reusable/wrapper.tsx

@@ -37,7 +37,7 @@ const Wrapper = (props: WrapperProps) => {
                         }
                     </Breadcrumbs>
                 }
-                <h1 className={"mt-4 text-title-1 font-bold italic uppercase pb-16"}>{props.title}</h1>
+                <h1 className={"mt-4 lg:text-7xl text-3xl font-bold italic uppercase pb-16"}>{props.title}</h1>
 
                 {props.children}
 

src/pages/catalog/[code].tsx

@@ -1,4 +1,4 @@
-import {BreadcrumbItem, Breadcrumbs, Button} from "@nextui-org/react";
+import {BreadcrumbItem, Breadcrumbs, Button, Skeleton, Spinner} from "@nextui-org/react";
 import HomeIcon from "../../../public/home_icon.svg";
 import Link from "next/link";
 import axios from "axios";
@@ -11,6 +11,7 @@ import {useSnapshot} from "valtio";
 import useClient from "@/hooks/useClient";
 import LocalAPI from "@/service/localAPI";
 import {useQuery, useQueryClient, useMutation} from "@tanstack/react-query";
+import {Img} from 'react-image'
 
 const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
     const {favourites} = useSnapshot(favouritesStore)
@@ -56,33 +57,32 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
                         <BreadcrumbItem>{product.name}</BreadcrumbItem>
                     </Breadcrumbs>
                 </div>
-                <div className="wrapper mt-12 grid grid-cols-2">
+                <div className="wrapper mt-12 grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
-                    {/*TODO image*/}
+                    {isClient && product.properties.main_image && <Img src={"https://relynolli.ru/upload/" + product.properties.main_image[0]} alt={product.name} className={"object-center max-w-[300px] mx-auto"} loader={<Spinner />}/>}
-                    {product.properties.main_image && <img src={product.properties.main_image[0]} alt="#"/>}
+                    <div className="right-block mt-4">
-                    <div className="right-block">
                         <span
-                            className={"text-xl text-[#E0E3E3] mb-7 block"}>Артикул: {product.properties.vendor_code}</span>
+                            className={"text-sm md:text-xl text-[#E0E3E3] mb-7 block"}>Артикул: {product.properties.vendor_code}</span>
-                        <h1 className={"text-title-3 font-bold mb-7"}>{product.name}</h1>
+                        <h1 className={"text-2xl md:text-4xl font-bold mb-7"}>{product.name}</h1>
 
                         <div className="block">
                             <span
-                                className={"block mb-7 text-xl text-[#E0E3E3]"}>Категория: {product.properties.category}</span>
+                                className={"text-base md:text-xl block mb-7 text-[#E0E3E3]"}>Категория: {product.properties.category}</span>
                             <span
-                                className={"block mb-7 text-xl text-[#E0E3E3]"}>Вязкость: {product.properties.viscosity}</span>
+                                className={"text-base md:text-xl block mb-7 text-[#E0E3E3]"}>Вязкость: {product.properties.viscosity}</span>
                             <span
-                                className={"block mb-7 text-xl text-[#E0E3E3]"}>Тип: {product.properties.oil_type}</span>
+                                className={"text-base md:text-xl block mb-7 text-[#E0E3E3]"}>Тип: {product.properties.oil_type}</span>
                         </div>
-                        <Button isDisabled color={"warning"} className={"text-black italic text-xl py-8 mb-7"}><span
+                        <Button isDisabled color={"warning"} className={"text-black italic md:text-xl text-sm py-8 mb-7 w-full lg:w-auto"}><span
                             className={"font-bold"}>Скидка 10%</span> при покупке более 12 шт</Button>
-                        <div className="flex justify-between items-center w-3/4">
+                        <div className="grid items-center grid-cols-2 lg:grid-cols-4 gap-5 pb-5">
 
-                        <span className="font-bold text-title-4 text-white text-center">
+                        <span className="font-bold text-3xl text-white text-center">
-                            {product.price.BASE} ₽
+                            {`${product.price.BASE}`.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')} ₽
                             <span className={"block text-base text-[#E0E3E3] font-normal"}>1 шт</span>
                         </span>
 
                             {isClient &&
-                            <Button onClick={() => toggleCart.mutate({productId: product.id, quantity: 1})} color={"primary"} className={"text-black font-extrabold uppercase italic h-[70px]"}
+                            <Button onClick={() => toggleCart.mutate({productId: product.id, quantity: 1})} color={"primary"} className={"order-3 col-span-2 lg:order-none text-black font-extrabold uppercase italic h-[70px]"}
                                     startContent={<Cart/>}>
 
                                 {cartItems.data && cartItems.data.map(({id})=> id).includes(product.id) ? "В корзине" : "Добавить в корзину"}
@@ -90,7 +90,7 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
                             </Button>}
                             {
                                 isClient &&
-                                <Button onClick={() => toggleFavourite(product.id)} className={`px-5 rounded-[8px] h-[70px] ${favourites.includes(product.id) ? "bg-green-2 fill-black": "bg-[#E2E2E5] bg-opacity-30 fill-white"}`}>
+                                <Button onClick={() => toggleFavourite(product.id)} className={`max-w-fit justify-self-end lg:justify-self-start order-2 lg:order-none px-5 rounded-[8px] h-[70px] ${favourites.includes(product.id) ? "bg-green-2 fill-black": "bg-[#E2E2E5] bg-opacity-30 fill-white"}`}>
                                     <Favourites />
                                 </Button>
                             }

src/pages/catalog/index.tsx

@@ -1,15 +1,12 @@
 import {
-    Breadcrumbs,
-    BreadcrumbItem,
     CheckboxGroup,
     Checkbox,
     Button, Skeleton
 } from "@nextui-org/react";
 import Link from "next/link";
-import axios from "axios";
+
 import {InferGetStaticPropsType} from "next";
 import FavouriteIcon from "@/../public/favourites_icon.svg";
-import {Dispatch, SetStateAction, useEffect, useState} from "react";
 import {toggleFavourite} from "@/store/favourites";
 import {useSnapshot} from "valtio";
 
@@ -18,6 +15,7 @@ import useClient from "@/hooks/useClient";
 import Wrapper from "@/components/reusable/wrapper";
 import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import LocalAPI from "@/service/localAPI";
+import {Img} from "react-image";
 
 
 
@@ -49,7 +47,7 @@ const CatalogCard = (product: CardProps) => {
         return await service.getCartItems()
     }})
 
-    const [imageIsLoading, setImageIsLoading] = useState(true);
+
     const qs = useQueryClient()
 
     const toggleCart = useMutation({
@@ -65,19 +63,12 @@ const CatalogCard = (product: CardProps) => {
         }
     })
 
-    const onImageLoad = () => {
-        setImageIsLoading(false);
-    }
-
 
     return (
         <div className={"bg-gray-card w-full h-fit min-h-[250px] py-4 px-7 rounded-[20px] hover:shadow-md transition-shadow hover:cursor-pointer"} key={product.id}>
             <div className={"grid grid-cols-1 sm:grid-cols-10 w-fit relative items-center"}>
                 {
-                    imageIsLoading && <Skeleton className={"absolute top-0 left-0 right-3/4 rounded-[20px] h-full"} />
+                    isClient && product.properties.main_image && <Img src={`https://relynolli.ru/upload/${product.properties.main_image[0]}`} alt={product.name} className={"col-auto mx-auto mb-4 sm:col-span-2 sm:row-span-2"} loader={<Skeleton className={"absolute top-0 left-0 right-3/4 rounded-[20px] h-full"} />}/>
-                }
-                {
-                    product.properties.main_image && <img src={`/upload/${product.properties.main_image[0]}`} alt={product.name} className={"col-auto mx-auto mb-4 sm:col-span-2 sm:row-span-2"} width={300} height={430} onLoad={onImageLoad}/>
                 }
                 <div className="col-auto sm:col-start-4 sm:col-span-6 h-full flex flex-col justify-center">
                     <span className={"text-[#52525C] font-normal text-subtitle-4 mb-2 block"}>Стандарт API: {product.properties.api_standart} Тип: {product.properties.oil_type}</span>
@@ -90,7 +81,7 @@ const CatalogCard = (product: CardProps) => {
 
                 <div className="flex col-auto row-auto sm:row-start-2 sm:col-start-4 sm:col-span-7 justify-between w-full items-center pt-4">
                                                 <span className="font-bold text-xl text-black-3">
-                                                    {product.price.BASE} ₽
+                                                    {`${product.price.BASE}`.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')} ₽
                                                 </span>
                     {
                         isClient ?

src/styles/globals.css

@@ -19,7 +19,7 @@
     }
 
     .wrapper {
-        @apply 2xl:max-w-[1440px] max-w-full sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] mx-auto;
+        @apply 2xl:max-w-[1440px] max-w-[90%] sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] mx-auto;
     }
 
 }

yarn.lock

@@ -5497,6 +5497,11 @@ react-hook-form@^7.50.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed"
   integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==
 
+react-image@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.1.0.tgz#92f2d4a809a178b3bf69acd7bad7da7aa5e7364c"
+  integrity sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==
+
 react-imask@^7.5.0:
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/react-imask/-/react-imask-7.5.0.tgz#ba751c3b29c263fc47293e49755a5f0a369a12f8"