From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src2/pages/index.js | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src2/pages/index.js

(limited to 'src2/pages/index.js')

diff --git a/src2/pages/index.js b/src2/pages/index.js
new file mode 100644
index 00000000..65999ff6
--- /dev/null
+++ b/src2/pages/index.js
@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import { Pagination, Autoplay } from "swiper";
+import axios from "axios";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/autoplay";
+
+// Helpers
+import apiOdoo from "@/core/utils/apiOdoo";
+
+// Components
+import Header from "@/components/layouts/Header";
+import ProductSlider from "@/components/products/ProductSlider";
+import Layout from "@/components/layouts/Layout";
+import ManufactureCard from "@/components/manufactures/ManufactureCard";
+import Footer from "@/components/layouts/Footer";
+import Image from "@/components/elements/Image";
+import ProductCategories from "@/components/products/ProductCategories";
+
+const swiperBanner = {
+  pagination: { dynamicBullets: true },
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay]
+}
+
+export async function getServerSideProps() {
+  const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
+
+  return { props: { heroBanners } };
+}
+
+export default function Home({ heroBanners }) {
+  const [manufactures, setManufactures] = useState(null);
+  const [popularProducts, setPopularProducts] = useState(null);
+
+  useEffect(() => {
+    const getManufactures = async () => {
+      const dataManufactures = await apiOdoo('GET', `/api/v1/manufacture?level=prioritas`);
+      setManufactures(dataManufactures);
+    }
+    getManufactures();
+
+    const getPopularProducts = async () => {
+      const dataPopularProducts = await axios(`${process.env.SELF_HOST}/api/shop/search?q=*&page=1&order_by=popular`);
+      setPopularProducts(dataPopularProducts.data.response);
+    }
+    getPopularProducts();
+  }, []);
+
+  return (
+    <>
+      <Header title='Home - Indoteknik' />
+      <Layout>
+        <Swiper 
+          slidesPerView={1} 
+          pagination={swiperBanner.pagination} 
+          modules={swiperBanner.modules}
+          autoplay={swiperBanner.autoplay}
+        >
+          {
+            heroBanners?.map((banner, index) => (
+              <SwiperSlide key={index}>
+                <Image
+                  src={banner.image} 
+                  alt={banner.name} 
+                  className="w-full h-auto"
+                />
+              </SwiperSlide>
+            ))
+          }
+        </Swiper>
+        <div className="mt-6 px-4">
+          <h2 className="mb-3">Brand Pilihan</h2>
+          <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
+            {
+              manufactures?.manufactures?.map((manufacture, index) => (
+                <SwiperSlide key={index}>
+                  <ManufactureCard data={manufacture} key={index} />
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+        </div>
+        <div className="my-6 p-4 py-0">
+          <h2 className="mb-4">Produk Populer</h2>
+          <ProductSlider products={popularProducts} simpleProductTitleLine />
+        </div>
+
+        <ProductCategories />
+
+        <div className="px-4">
+          <h5 className="h2 mb-2">Platform Belanja B2B Alat Teknik & Industri di Indonesia</h5>
+          <p className="text-gray_r-11 leading-6 text-caption-2 mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
+          </p>
+        </div>
+        
+        <Footer />
+      </Layout>
+    </>
+  )
+}
-- 
cgit v1.2.3