update 14/01
This commit is contained in:
@@ -1,16 +1,32 @@
|
||||
import { categories } from "@/data/categories";
|
||||
|
||||
export default function FeaturedProductCategories() {
|
||||
const {all_category} = categories.product;
|
||||
|
||||
return (
|
||||
<div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
|
||||
<h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
|
||||
<>
|
||||
{all_category &&
|
||||
<div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
|
||||
<h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
|
||||
|
||||
<div className="grid grid-cols-10 gap-6">
|
||||
<a href="" className="item">
|
||||
<i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-3.png)' }}></i>
|
||||
<span className="block"> PC Thiết Kế Đồ Họa </span>
|
||||
</a>
|
||||
|
||||
<a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-1.png)' }}></i><span className="block">PC Thiết</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-2.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-4.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-5.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-7.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-8.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-9.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-11.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-12.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-13.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a>
|
||||
<div className="grid grid-cols-10 gap-6">
|
||||
{all_category
|
||||
.filter( (item:any) => item.is_featured === 1 )
|
||||
.map( (item:any) =>
|
||||
<a href={item.url} className="item" key={item.id}>
|
||||
<i className="image lazy"
|
||||
style={{ backgroundImage: `url(${item.thumnail})` }}
|
||||
></i>
|
||||
|
||||
<span className="block">
|
||||
{item.title}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,88 +1,67 @@
|
||||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
import { dealList } from "@/data/deals"
|
||||
import DealItem from "@/components/shared/DealItem"
|
||||
|
||||
export default function Collection() {
|
||||
|
||||
const data = dealList.filter(item => item.total > 0) ?? [];
|
||||
|
||||
export default function Deal() {
|
||||
return (
|
||||
<div className="home-deal-container my-[3rem]">
|
||||
<div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
|
||||
<div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
|
||||
<div className="flex items-center flex items-center">
|
||||
<div className="flex items-center">
|
||||
<i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
|
||||
<p className="m-0 mr-5 font-600 text-[32px]"> Cấu hình Flash Sale </p>
|
||||
</div>
|
||||
|
||||
<div className="deal-time-holder">
|
||||
<p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/deal" className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
|
||||
<div className="custom-nav hidden">
|
||||
<div className="button-icon swiper-button-prev"></div>
|
||||
<div className="button-icon swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={24}
|
||||
slidesPerView={5}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
navigation={{
|
||||
prevEl: '.custom-nav .swiper-button-prev',
|
||||
nextEl: '.custom-nav .swiper-button-next',
|
||||
}}
|
||||
breakpoints={{
|
||||
1600: {
|
||||
slidesPerView: 6,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div className="deal-item">
|
||||
<a href="" className="deal-img">
|
||||
<img src="images/product-1.jpg" alt="" width="1" height="1" className="fit-img"/>
|
||||
</a>
|
||||
|
||||
<div className="deal-text">
|
||||
<a href="" className="deal-name"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia </a>
|
||||
|
||||
<div className="deal-price-holder">
|
||||
<div>
|
||||
<p className="deal-price"> 48.990.000 đ </p>
|
||||
<del> 52.000.000 đ </del>
|
||||
<span className="deal-discount"> -6% </span>
|
||||
</div>
|
||||
|
||||
<button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button>
|
||||
</div>
|
||||
|
||||
<div className="deal-count">
|
||||
<i className="deal-line" style={{ width: '30%' }}></i>
|
||||
<span> Còn: 3/5 sản phẩm </span>
|
||||
</div>
|
||||
|
||||
<div className="deal-offer">
|
||||
<span className="text-[#BE1F2D]"> Quà tặng: </span>
|
||||
Màn hình Coolest Maste và chuột không dây Logitech
|
||||
</div>
|
||||
</div>
|
||||
data.map( (item:any) => (
|
||||
<div className="home-deal-container my-[3rem]" key={item.collection_info.id}>
|
||||
<div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
|
||||
<div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
|
||||
<div className="flex items-center flex items-center">
|
||||
<div className="flex items-center">
|
||||
<i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
|
||||
<p className="m-0 mr-5 font-600 text-[32px]"> {item.collection_info.title} </p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-2.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '0%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-3.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '70%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-4.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-5.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-6.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
<div className="deal-time-holder">
|
||||
<p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href='/deal' className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
|
||||
<div className="custom-nav hidden">
|
||||
<div className="button-icon swiper-button-prev"></div>
|
||||
<div className="button-icon swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={24}
|
||||
slidesPerView={5}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
navigation={{
|
||||
prevEl: '.custom-nav .swiper-button-prev',
|
||||
nextEl: '.custom-nav .swiper-button-next',
|
||||
}}
|
||||
breakpoints={{
|
||||
1600: {
|
||||
slidesPerView: 6,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{ item.list.map( (deal:any) =>
|
||||
<SwiperSlide key={deal.id}>
|
||||
<DealItem item={deal} />
|
||||
</SwiperSlide>
|
||||
)}
|
||||
</Swiper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)
|
||||
}
|
||||
18
src/components/home/Slider/ImageList.tsx
Normal file
18
src/components/home/Slider/ImageList.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import ImageItem from '@/components/shared/ImageItem';
|
||||
|
||||
type Props = {
|
||||
data?: any[];
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function BannerList({ data = [], className = '' }: Props) {
|
||||
if (!data.length) return null;
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{data.map((item) => (
|
||||
<ImageItem key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,16 @@
|
||||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
import { banner } from '@/data/banner'
|
||||
import ImageItem from '@/components/shared/ImageItem';
|
||||
import ImageList from './ImageList';
|
||||
|
||||
export default function Slider() {
|
||||
const bannerSlider = banner.homepage['2022_home_slider'] ?? [];
|
||||
const bannerRight = banner.homepage['2022_home_right_slider'] ?? [];
|
||||
const bannerUnder = banner.homepage['2022_home_under_slider'] ?? [];
|
||||
const underSlider = banner.homepage['2022_4_under_slider'] ?? [];
|
||||
|
||||
return(
|
||||
<div className="home-banner-container mb-10 min-h-[845px]">
|
||||
<div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
|
||||
@@ -19,29 +27,14 @@ export default function Slider() {
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
{
|
||||
bannerSlider.map((item:any) =>
|
||||
<SwiperSlide key={item.id}>
|
||||
<ImageItem item={item} />
|
||||
</SwiperSlide>
|
||||
)
|
||||
}
|
||||
|
||||
</Swiper>
|
||||
|
||||
<div className="custom-nav hidden">
|
||||
@@ -58,34 +51,22 @@ export default function Slider() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-banner-right col-span-1">
|
||||
<a href="" className="last:mb-0 mb-4">
|
||||
<img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
<ImageList
|
||||
data={bannerRight}
|
||||
className="home-banner-right col-span-1"
|
||||
/>
|
||||
|
||||
<a href="" className="last:mb-0 mb-4">
|
||||
<img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
|
||||
<a href="">
|
||||
<img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
</div>
|
||||
<ImageList
|
||||
data={bannerUnder}
|
||||
className="grid grid-cols-3 gap-4 col-span-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||
<a href="">
|
||||
<img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
<a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
<a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
</div>
|
||||
<ImageList
|
||||
data={underSlider}
|
||||
className="grid grid-cols-4 gap-4 mt-4"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
import Slider from "./Slider";
|
||||
import Deal from "./Deal";
|
||||
import FeaturedProductCategories from "./Category";
|
||||
import ProductCategories from "./Product";
|
||||
import Article from "./Article";
|
||||
import Slider from "./slider";
|
||||
import Deal from "./deal";
|
||||
import FeaturedProductCategories from "./category";
|
||||
import ProductCategories from "./product";
|
||||
import Article from "./article";
|
||||
|
||||
export default function Home() {
|
||||
export default function HomePage() {
|
||||
|
||||
return(
|
||||
<div className="home-page !-mt-5 pt-6">
|
||||
<div className="container">
|
||||
|
||||
Reference in New Issue
Block a user