"use client"
import {useState, useEffect, useRef} from "react";
import s from "./index.module.scss";
import {Link} from "@/lib/i18n/navigation";
import Image from "@/modules/common/components/image";
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import type {Swiper as SwiperType} from 'swiper';
import Button from "@/modules/common/components/button/border";
import { Product, ProductCategory } from "@/types/gpl/graphql";
type Props = {
param: {
categories: ProductCategory[];
products: Product[];
};
}
export default function ProductOne({ param }: Props) {
const swiperInsRef = useRef<SwiperType|null>(null);
const {categories, products} = param;
const [currentCategory, setCurrentCategory] = useState<ProductCategory>(categories[0]);
const [productList, setProductList] = useState<Product[]>(products?.filter((item) => item?.product_category?.slug === currentCategory?.slug));
useEffect(() => {
setProductList(products?.filter((item) => item?.product_category?.slug === currentCategory?.slug) || []);
}, [currentCategory, products]);
return (
<div className={s.container}>
<div className={s.content}>
<div className={s.bikeCategoryWrap}>
<div className={s.categoryContentRow}>
<aside className={s.categoryImageSidebar}>
{categories?.slice(0, 2)?.map((card,index) => (
<Link key={index} className={s.sidebarCard} href={`product/category/${card?.slug}`} data-aos="fade-right">
<div className={s.imgCenter}>
<Image image={card?.cover} sizes='400px' />
</div>
<span className={s.cardLabel}>{card?.name}</span>
</Link>
))}
</aside>
<div className={s.rightContentWrap} data-aos="fade-left" >
<div className={s.categoryTagList}>
{categories?.map((item,index)=>{
return (
<button key={index} onClick={()=>setCurrentCategory(item)} className={`${s.categoryTag} ${currentCategory?.slug === item?.slug ? s.active : ""}`} >{item?.name}</button>
)
})}
</div>
<div className={s.listWrap}>
<Swiper
slidesPerView={2} //预览
spaceBetween={0} //间距
className={s.mySwiper}
breakpoints={{ //断点
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
}
}}
onSwiper={(swiper) => swiperInsRef.current = swiper} //2.实例化时存入swiper
>
{
productList?.map((item,index) =>
<SwiperSlide className={s.item} key={index}>
<Link className={s.bikeProductCard} href={`product/${item?.slug}`}>
<div className={s.imgCenter}>
<Image image={item?.cover} sizes='400px' fit="contain" />
</div>
<p className={s.productName}>{item?.name}</p>
</Link>
</SwiperSlide>
)
}
</Swiper>
<div className={s.bottom}>
<div className={s.left} onClick={() => swiperInsRef.current?.slidePrev()}>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" data-astro-cid-pjn6vdth="true">
<path d="M15 20L10 15L15 10M10 15H20M27.5 15C27.5 21.9036 21.9036 27.5 15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15Z" stroke="#1E1E1E" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div className={s.right} onClick={() => swiperInsRef.current?.slideNext()}>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" data-astro-cid-pjn6vdth="true">
<path d="M15 10L20 15L15 20M20 15H10M27.5 15C27.5 21.9036 21.9036 27.5 15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15Z" stroke="#1E1E1E" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
.container {
width: 100%;
padding: 80px 20px;
.content {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
.bikeCategoryWrap {
.categoryContentRow {
display: flex;
flex-direction: column;
gap: 30px;
@include lg {
flex-direction: row;
}
}
.categoryImageSidebar {
display: flex;
flex-direction: column;
gap: 20px;
@include md {
flex-direction: row;
}
@include lg {
flex-direction: column;
flex: 0 0 360px;
}
.sidebarCard {
position: relative;
overflow: hidden;
border-radius: 12px 0 12px 0;
// height: 180px;
aspect-ratio: 347/206;
width: 100%;
.imgCenter {
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
}
&:hover {
.cardLabel {
// color: var(--primary-color);
transform: translateY(-2px);
}
.imgCenter {
transform: scale(1.1);
}
}
@include md {
// flex: 1;
}
@include lg {
// height: 200px;
}
.cardLabel {
transition: all .2s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: #ffffff;
font-size: var(--font-lg);
font-weight: 600;
}
}
}
.rightContentWrap {
flex: 1;
display: flex;
flex-direction: column;
// gap: 30px;
min-width: 0;
gap: 30px;
}
.categoryTagList {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
@include lg {
justify-content: flex-start;
}
.categoryTag {
border: none;
outline: none;
padding: 10px 18px;
background-color: var(--back-color);
color: #000000;
border-radius: 6px 0 6px 0;
font-size: var(--font-base);
font-weight: 500;
cursor: pointer;
transition: all .2s ease-in-out;
&:hover {
background-color: var(--primary-color);
color: #fff;
}
&.active {
background-color: var(--primary-color);
color: #fff;
}
}
}
.bikeProductCard {
flex: 0 0 100%;
text-align: center;
cursor: pointer;
.imgCenter {
width: 100%;
transition: all .2s;
aspect-ratio: 510/320;
}
&:hover {
.imgCenter {
transform: scale(1.1);
}
.productName {
color: var(--primary-color);
}
}
@include lg {
flex: 0 0 calc((100% - 20px) / 2);
}
.productName {
margin-top: 15px;
font-size: var(--font-lg);
color: #000;
transition: all .2s ease;
font-weight: 500;
}
}
.bottom {
display: flex;
justify-content: flex-end;
gap: 15px;
margin-top: 25px;
.left {
height: 30px;
width: 30px;
cursor: pointer;
svg {
transition: all .2s ease-in-out;
}
&:hover {
svg {
stroke-width: 2px;
transform: translateY(-2px);
}
}
.leftArrow {
width: 100%;
height: 100%;
}
}
.right {
height: 30px;
width: 30px;
cursor: pointer;
svg {
transition: all .2s ease-in-out;
}
&:hover {
svg {
stroke-width: 2px;
transform: translateY(-2px);
}
}
.rightArrow {
width: 100%;
height: 100%;
}
}
}
}
}
}