From ed3261772b50cd58b4ca5b341d47b044ebc327ea Mon Sep 17 00:00:00 2001
From: Kris Haamer <kris@haam.co>
Date: Mon, 6 May 2024 15:07:41 +0800
Subject: [PATCH] Add slides stub

---
 app/globals.css                    |  5 +++
 components/llm-factories/index.tsx | 55 +++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index fc1cd16..21af96a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -79,6 +79,11 @@
     width: auto;
   }
 
+  .swiper {
+    width: 600px;
+    height: 300px;
+  }
+
   * {
     @apply border-border;
   }
diff --git a/components/llm-factories/index.tsx b/components/llm-factories/index.tsx
index ea46156..614a53c 100644
--- a/components/llm-factories/index.tsx
+++ b/components/llm-factories/index.tsx
@@ -1,35 +1,50 @@
 "use client";
 
 import { APIProvider, Map, Marker } from "@vis.gl/react-google-maps";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
 
 export default function Factories() {
   const position = { lat: 23.0124433, lng: 120.212851 };
   const marker1 = { lat: 23.0124433, lng: 120.312851 };
-  const marker2 = { lat: 23.018500, lng: 120.312751 };
+  const marker2 = { lat: 23.0185, lng: 120.312751 };
   const marker3 = { lat: 23.0124222, lng: 120.318951 };
 
   return (
-    <div
-      style={{ height: "500px", width: "100%" }}
-      className="rounded-lg shadow-lg ring overflow-hidden"
-    >
-      <APIProvider
-        apiKey={
-          process.env.REACT_APP_GOOGLE_MAPS_API_KEY ||
-          "AIzaSyB6uP_GJFF4Ngfxdp3aftquS7cYp_tgw18"
-        }
+    <div>
+      <Swiper
+        spaceBetween={50}
+        slidesPerView={3}
+        onSlideChange={() => console.log("slide change")}
+        onSwiper={(swiper) => console.log(swiper)}
       >
-        <Map
-          defaultCenter={position}
-          defaultZoom={13}
-          gestureHandling={"greedy"}
-          disableDefaultUI={true}
+        <SwiperSlide>Slide 1</SwiperSlide>
+        <SwiperSlide>Slide 2</SwiperSlide>
+        <SwiperSlide>Slide 3</SwiperSlide>
+        <SwiperSlide>Slide 4</SwiperSlide>
+      </Swiper>
+      <div
+        style={{ height: "500px", width: "100%" }}
+        className="rounded-lg shadow-lg ring overflow-hidden"
+      >
+        <APIProvider
+          apiKey={
+            process.env.REACT_APP_GOOGLE_MAPS_API_KEY ||
+            "AIzaSyB6uP_GJFF4Ngfxdp3aftquS7cYp_tgw18"
+          }
         >
-          <Marker position={marker1} />
-          <Marker position={marker2} />
-          <Marker position={marker3} />
-        </Map>
-      </APIProvider>
+          <Map
+            defaultCenter={position}
+            defaultZoom={13}
+            gestureHandling={"greedy"}
+            disableDefaultUI={true}
+          >
+            <Marker position={marker1} />
+            <Marker position={marker2} />
+            <Marker position={marker3} />
+          </Map>
+        </APIProvider>
+      </div>
     </div>
   );
 }