blob: 9d26d8ee92e03ec80d4c5080cd986c67228f9e0c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
import { useEffect, useState } from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper";
import Header from "../components/Header";
import { getOdoo } from "../helpers/apiOdoo";
import "react-lazy-load-image-component/src/effects/blur.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import ProductSlider from "../components/product/ProductSlider";
export default function Home() {
const [heroBanners, setHeroBanners] = useState(null);
const [manufactures, setManufactures] = useState(null);
const [readyStockProducts, setReadyStockProducts] = useState(null);
const [popularProducts, setPopularProducts] = useState(null);
useEffect(() => {
const getHeroBanners = async () => {
const dataHeroBanners = await getOdoo(`/api/v1/banner?type=index-a-1`);
setHeroBanners(dataHeroBanners);
}
getHeroBanners();
const getManufactures = async () => {
const dataManufactures = await getOdoo(`/api/v1/manufacture?level=prioritas`);
setManufactures(dataManufactures);
}
getManufactures();
const getReadyStockProducts = async () => {
const dataReadyStockProducts = await getOdoo(`/api/v1/product?ready_stock=1&limit=30`);
setReadyStockProducts(dataReadyStockProducts);
}
getReadyStockProducts();
const getPopularProducts = async () => {
const dataPopularProducts = await getOdoo(`/api/v1/product?manufactures=10&limit=30`);
setPopularProducts(dataPopularProducts);
}
getPopularProducts();
}, []);
return (
<>
<Header title="Home - Indoteknik" />
<Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
{
heroBanners?.map((banner, index) => (
<SwiperSlide key={index}>
<LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
</SwiperSlide>
))
}
</Swiper>
<div className="mt-6 px-4">
<h2 className="text-gray-900 font-bold mb-3">Brand Pilihan</h2>
<Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
{
manufactures?.manufactures?.map((manufacture, index) => (
<SwiperSlide key={index}>
<div className="border border-gray-300 p-1 rounded h-full">
<LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
</div>
</SwiperSlide>
))
}
</Swiper>
</div>
<div className="mt-6 px-4 mb-6">
<h2 className="text-gray-900 font-bold mb-3">Produk Ready Stock</h2>
<ProductSlider products={readyStockProducts} />
</div>
<div className="mt-6 px-4 mb-6">
<h2 className="text-gray-900 font-bold mb-3">Produk Populer</h2>
<ProductSlider products={popularProducts} />
</div>
</>
)
}
|
