tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
3eada29d4c179512b93be47552649855aa934583
bestpc/old/src/pages/product/ProductDetail.tsx

890 lines
40 KiB
TypeScript
Raw Normal View History

upload 14/5
2025-05-14 15:11:00 +07:00
import { useState, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { SupplierListBox } from "../../components/product/SupplierListBox";
import { ProductDescription } from "../../components/product/ProductDescription";
import { MemberReview } from "../../components/product/MemberReview";
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
export function ProductDetail() {
// const [activeImage, setActiveImage] = useState(
// "/src/assets/images/big-product-detail.png"
// );
const [thumbsSwiper, setThumbsSwiper] = useState(null);
return (
<>
<div className="box-product-detail bg-[#F4F4F4] pb-[100px]">
<div className="container">
<div className="breadcrumb p-[12px_0]">
<ol
itemscope
itemtype="http://schema.org/BreadcrumbList"
className="ul flex flex-wrap items-center"
>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/template/homepage/homepage.html"
itemprop="item"
className="nopad-l flex items-center text-[#637381]"
>
<span itemprop="name">
<span style="font-size: 0; display: none;">Trang chủ</span>
<i className="icon_2025 home mr-[5px] mb-[5px]" />
</span>
</a>{" "}
<i className="icon_2025 angle-right ml-[12px]" />
<meta itemprop="position" content="1" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/man-hinh.html"
itemprop="item"
className="nopad-l flex items-center"
>
<span itemprop="name">Màn hình máy tính</span>
<i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
</a>
<meta itemprop="position" content="2" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/aivision.html"
itemprop="item"
className="nopad-l flex items-center"
>
<span itemprop="name">AIVISION</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
</div>
<div className="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
<div className="left">
<div className="relative">
<Swiper
spaceBetween={10}
navigation={true}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="swiper border border-[#B1B1B1 rounded-[12px]"
id="js-slider-big"
>
<SwiperSlide>
<img src="/assets/images/big-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/big-product-detail.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/big-product-detail-2.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/big-product-detail-3.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/big-product-detail-4.jpg" alt="" />
</SwiperSlide>
</Swiper>
</div>
<div className="relative mt-[12px]">
<Swiper
onSwiper={setThumbsSwiper}
spaceBetween={15}
slidesPerView={5}
navigation={{
upload 15/5
2025-05-15 15:43:18 +07:00
prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
upload 14/5
2025-05-14 15:11:00 +07:00
}}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="swiper"
id="js-slider-small"
>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide>
</Swiper>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="btn-small" id="btn-slider-small">
<div className="swiper-button-next right-[-15px] w-[30px] h-[30px]"></div>
<div className="swiper-button-prev left-[-15px] w-[30px] h-[30px]"></div>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
<div className="right">
<h1 className="text-[24px] text-black mb-[5px]">
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
FHD) - Hàng Chính Hãng
</h1>
<div className="flex items-center text-base">
<div className="info-review flex items-center mr-[15px]">
<i className="icon-star star-small" />
<span className="ml-[5px] mt-[2px]">5/5</span>
</div>
<div className="info-view flex items-center mr-[15px]">
<i className="icon_2025 view" />
<span className="text-[#1877F2] ml-[5px]">120</span>
</div>
<div className="info-date flex items-center mr-[15px]">
<i className="icon_2025 time-big" />
<span className="text-[#1877F2] ml-[5px]">12/03/2025</span>
</div>
<a href="" className="info-share flex items-center">
<i className="icon_2025 share" />
<span className="ml-[5px] mt-[2px]">Chia sẻ</span>
</a>
</div>
<div className="flex items-center mt-[5px] text-base">
<div className="source-review flex items-centermr-[10px]">
<span>Reviews trên:</span>
<a href="" className="ml-[5px] text-[#1877F2]">
Internet
</a>
<p className="ml-[5px]">1233 đánh giá</p>
</div>
<div className="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
<a href="" className="mr-[5px] text-[#462F91]">
BestPC
</a>
<p>12003 đánh giá</p>
</div>
</div>
<div className="box-price flex items-center my-[10px]">
<span className="mr-[10px]">Giá:</span>
<b className="text-[#D80A00] text-[28px]">
9.000.000đ - 12.000.000đ
</b>
</div>
<div className="total-shop flex items-center">
<div className="box-shop">
<i className="icon_2025 shop" />
</div>
<p className="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
<div className="box-summary mt-[15px]">
<ul>
<li>
CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân,
12 luồng )
</li>
<li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
<li>RAM: 1 x 8GB DDR4 2666MHz</li>
<li>
Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti
4GB GDDR5
</li>
<li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
<li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
<li>Pin: 4 cell 64 Wh Pin liền</li>
<li>khối lượng: 2.5 kg</li>
<li>Cổng giao tiếp: 1x USB 2.0,</li>
</ul>
</div>
<a
href=""
className="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white"
>
<img
src="/assets/images/icon-file-save.png"
className="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
alt="save"
/>
<b className="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
</a>
</div>
</div>
{/* end thông tin sản phẩm */}
<SupplierListBox />
{/* end nhà cung cấp */}
<MemberReview />
{/* đánh giá thành viên bestpc */}
<ProductReview />
upload 28/5
2025-05-28 15:30:26 +07:00
{/* <ProductReview /> */}
upload 14/5
2025-05-14 15:11:00 +07:00
{/* đánh giá trên internet */}
<ProductDescription />
{/* thông tin sản phẩm */}
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="mt-5 bg-white rounded-[8px] p-[15px]">
<div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<h3 className="text-xl font-bold">Sản phẩm tương tự</h3>
upload 14/5
2025-05-14 15:11:00 +07:00
<a
href="javascript:void(0)"
upload 15/5
2025-05-15 15:43:18 +07:00
className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
upload 14/5
2025-05-14 15:11:00 +07:00
>
<span>Xem tất cả</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
upload 14/5
2025-05-14 15:11:00 +07:00
</a>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="relative mt-[15px]">
upload 14/5
2025-05-14 15:11:00 +07:00
<Swiper
slidesPerView={5}
spaceBetween={15}
navigation={{
prevEl: "#js-product-similar-btn .swiper-button-prev", // Link to the 'prev' button
nextEl: "#js-product-similar-btn .swiper-button-next", // Link to the 'next' button
}}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="product-list swiper relative"
>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="btn-slider" id="js-product-similar-btn">
<div className="swiper-button-next right-[-15px]"></div>
<div className="swiper-button-prev left-[-15px]"></div>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
{/* sản phẩm tương tự */}
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="mt-5 bg-white rounded-[8px] p-[15px]">
<div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<h3 className="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
upload 14/5
2025-05-14 15:11:00 +07:00
<a
href="javascript:void(0)"
upload 15/5
2025-05-15 15:43:18 +07:00
className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
upload 14/5
2025-05-14 15:11:00 +07:00
>
<span>Xem tất cả</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
upload 14/5
2025-05-14 15:11:00 +07:00
</a>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="relative mt-[15px]">
upload 14/5
2025-05-14 15:11:00 +07:00
<Swiper
slidesPerView={5}
spaceBetween={15}
navigation={{
prevEl: "#js-product-like-btn .swiper-button-prev", // Link to the 'prev' button
nextEl: "#js-product-like-btn .swiper-button-next", // Link to the 'next' button
}}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="product-list swiper relative"
>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="product-item">
<a href="" className="product-image">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="info-product">
<a href="" className="name-product line-clamp-2">
upload 14/5
2025-05-14 15:11:00 +07:00
Laptop văn phòng Dell RAM 8G Core i7
</a>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="summary line-clamp-1">
upload 14/5
2025-05-14 15:11:00 +07:00
Intel Core i5 / 8GB / 256GB / SSD
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="locahost-pro flex items-center mb-[5px]">
<i className="icon_2025 map-3"></i>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Quận Thanh Xuân
</span>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="time-pro flex items-center mb-[5px]">
<i className="icon_2025 time-gray"></i>
<div className="flex items-center mt-[1px]">
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
11/04/2025
</span>
upload 15/5
2025-05-15 15:43:18 +07:00
<span className="ml-[5px]">|</span>
<span className="text-[#595959] ml-[5px] mt-[3px]">
upload 14/5
2025-05-14 15:11:00 +07:00
Còn 01 ngày
</span>
</div>
</div>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="price">15.000.000đ</div>
<div className="user-pro flex items-center">
upload 14/5
2025-05-14 15:11:00 +07:00
<img
src="/assets/images/avartar.png"
upload 15/5
2025-05-15 15:43:18 +07:00
className="w-[24px] h-[24px] block rounded-[50%]"
upload 14/5
2025-05-14 15:11:00 +07:00
width="24px"
height="24px"
alt="avartar"
/>
upload 15/5
2025-05-15 15:43:18 +07:00
<b className="ml-[7px]">Thanh Mai</b>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
upload 15/5
2025-05-15 15:43:18 +07:00
<div className="btn-slider" id="js-product-like-btn">
<div className="swiper-button-next right-[-15px]"></div>
<div className="swiper-button-prev left-[-15px]"></div>
upload 14/5
2025-05-14 15:11:00 +07:00
</div>
</div>
</div>
{/* sản phẩm yêu thích */}
</div>
</div>
</>
);
}
Reference in New Issue Copy Permalink