initial commit

components/SlidingGallery.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "../css/SlidingGallery.module.css";
+
+const views = [
+  {
+    id: "1",
+    content: (
+      <Link
+        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
+        className={styles.link}
+      >
+        <div className={styles.facebook}>
+          <div className={styles.textView}>
+            <h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
+            <p className={styles.facebookTwo}>Join Facebook Community</p>
+          </div>
+          <div className={styles.logoView}>
+            <Image
+              src="/images/static/facebook-logo.png"
+              alt="Facebook Logo"
+              width={120}
+              height={120}
+            />
+          </div>
+        </div>
+      </Link>
+    ),
+  },
+];
+
+const SlidingGallery = () => {
+  const [activeIdx, setActiveIdx] = useState(0);
+  const scrollRef = useRef(null);
+
+  const handleScroll = (event) => {
+    const scrollLeft = event.target.scrollLeft;
+    const slideWidth = event.target.clientWidth;
+    const index = Math.round(scrollLeft / slideWidth);
+    setActiveIdx(index);
+  };
+
+  return (
+    <div className={styles.gallery}>
+      <div
+        className={styles.scrollContainer}
+        ref={scrollRef}
+        onScroll={handleScroll}
+      >
+        {views.map((item) => (
+          <div key={item.id} className={styles.slide}>
+            {item.content}
+          </div>
+        ))}
+      </div>
+      <div className={styles.pagination}>
+        {views.map((_, index) => (
+          <div
+            key={index}
+            className={`${styles.dot} ${
+              activeIdx === index ? styles.activeDot : styles.inactiveDot
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SlidingGallery;