Fix Mobile container in /catalog and /catalog/<code>
Ernest Litvinenko
parent
2f4ee7021e
commit
82fe5666d6
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{/*TODO image*/}
|
||||
{product.properties.main_image && <img src={product.properties.main_image[0]} alt="#"/>}
|
||||
<div className="right-block">
|
||||
<div className="wrapper mt-12 grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
|
||||
{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 />}/>}
|
||||
<div className="right-block mt-4">
|
||||
<span
|
||||
className={"text-xl text-[#E0E3E3] mb-7 block"}>Артикул: {product.properties.vendor_code}</span>
|
||||
<h1 className={"text-title-3 font-bold mb-7"}>{product.name}</h1>
|
||||
className={"text-sm md:text-xl text-[#E0E3E3] mb-7 block"}>Артикул: {product.properties.vendor_code}</span>
|
||||
<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">
|
||||
{product.price.BASE} ₽
|
||||
<span className="font-bold text-3xl text-white text-center">
|
||||
{`${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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"} />
|
||||
}
|
||||
{
|
||||
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}/>
|
||||
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"} />}/>
|
||||
}
|
||||
<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 ?
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue