From 99e8ed4e7377e70139875b0177e3e97162a41baa Mon Sep 17 00:00:00 2001
From: dseydel <daniel.seydel@ionos.com>
Date: Fri, 23 Feb 2024 15:44:36 +0100
Subject: [PATCH] Implement smooth scrolling and category status

---
 src/components/item_list.tsx |   3 +-
 src/pages/index.tsx          | 110 ++++++++++++++++++-----------------
 src/styles/globals.css       |   3 +
 3 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/src/components/item_list.tsx b/src/components/item_list.tsx
index 7e8bfb7..1faa95b 100644
--- a/src/components/item_list.tsx
+++ b/src/components/item_list.tsx
@@ -1,4 +1,5 @@
 import {Collection, Item} from "@/lib/types";
+import Image from "next/image";
 
 export default function ItemList(collection: Collection) {
 
@@ -59,7 +60,7 @@ export default function ItemList(collection: Collection) {
 
     return (
         <div className="w-full text-center py-10" id={ collection.caption.toLowerCase() }>
-            <h1 className="text-3xl font-bold">{collection.caption}</h1>
+            <h1 className="text-3xl font-bold" id={ collection.caption.toLowerCase() + "_header" }>{collection.caption}</h1>
             <div className="py-3 px-4 lg:px-12 flex flex-wrap justify-center" key={ collection.caption.toLowerCase() }>
                 {getItems().map((value) => {
                     return buildItem(value)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 03163de..17f2269 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,65 +1,69 @@
-import Head from 'next/head'
 import {useEffect, useState} from "react";
 import ItemList from "@/components/item_list";
-import {Config} from "@/lib/types";
+import {Collection, Config} from "@/lib/types";
 
 export default function Home() {
 
-  const [collection, setCollection] = useState({} as Config);
-  const [collections, setCollections] = useState([] as string[]);
+    const [config, setConfig] = useState({} as Config);
+    const [collections, setCollections] = useState([] as string[]);
 
-  useEffect(() => {
-    fetch("https://api.wapuugotchi.com/collection")
-        .then(value => value.json()).then(value => {
-      setCollection(value)
-      let collections = [];
-      for(let index in collection.collections) {
-        collections.push(collection.collections[index].caption)
-      }
-      setCollections(collections)
-    });
-  })
+    useEffect(() => {
+        fetch("https://api.wapuugotchi.com/collection")
+            .then(value => value.json()).then(value => {
+            setConfig(value as Config)
+            console.log(config)
+            let collections = [];
+            for (let index in config.collections) {
+                collections.push(config.collections[index].caption)
+            }
+            setCollections(collections)
+        });
+    })
 
-  function getCollection( type: string ) {
-    return collection.collections.filter((value) => value.caption === type)[0]
-  }
+    function getCollection(type: string) {
+        return config.collections.filter((value) => value.caption === type)[0]
+    }
 
-  function isInView( collection: string ) {
-    let element = document.getElementById(collection.toLowerCase());
-    if(element) {
-      let rect = element.getBoundingClientRect();
+    function scrollTo(collection: Collection) {
+        let element = document.getElementById(collection.caption.toLowerCase() + "_header");
+        if (element) {
+            element.scrollIntoView({behavior: "smooth", inline: "center", block: "center"});
+        }
+    }
 
-      return (
-          rect.top >= 0 &&
-          rect.left >= 0 &&
-          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
-          rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
-      );
+    // Check if the collection is currently in view
+    function isInView(collection: Collection) {
+        let element = document.getElementById(collection.caption.toLowerCase());
+        if (element) {
+            let rect = element.getBoundingClientRect();
+            return rect.top >= 0 && rect.bottom <= window.innerHeight;
+        }
     }
-    return false;
-  }
 
-  return (
-    <div className="w-full h-full bg-gray-100" key={ "home_page" }>
-      <div className="w-full h-12 bg-gray-800 flex flex-row justify-between py-1 px-5 z-20 fixed">
-        <h1 className="text-2xl font-bold text-white">Wapuugotchi Collection</h1>
-        <ul className="flex flex-row gap-3 pr-5">
-          {
-            collections.map((value) => {
-              return (
-                <li key={ getCollection(value).caption }>
-                  <a className={ isInView(getCollection(value).caption) ? "nav-item active" : "nav-item"} href={ "#" + getCollection(value).caption.toLowerCase() }>{ getCollection(value).caption }</a>
-                </li>
-              )
-            })
-          }
-        </ul>
-      </div>
-      <div className="py-12">
-        {collections.map((value) => {
-            return ItemList(getCollection(value))
-          })}
-      </div>
-    </div>
-  )
+    return (
+        <div className="w-full h-full bg-gray-100" key={"home_page"}>
+            <div className="w-full h-12 bg-gray-800 flex flex-row justify-between py-1 px-5 z-20 fixed">
+                <h1 className="text-2xl font-bold text-white">WapuuGotchi Collection</h1>
+                <ul className="flex flex-row gap-3 pr-5 sm:hidden md:flex">
+                    {
+                        collections.map((collection) => {
+                            return (
+                                <li key={getCollection(collection).caption}>
+                                    <a className={isInView(getCollection(collection)) ? "nav-item active" : "nav-item"}
+                                       onClick={event => scrollTo(getCollection(collection))}>{getCollection(collection).caption}</a>
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+            </div>
+            <div className="py-12">
+                {
+                    collections.map((value) => {
+                        return ItemList(getCollection(value))
+                    })
+                }
+            </div>
+        </div>
+    )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1418941..e4e0281 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -16,6 +16,9 @@
 
 .nav-item {
     @apply hover:border-b-blue-500 hover:border-b-4 text-2xl font-bold text-white;
+    &.active {
+        @apply border-b-4 border-b-blue-500;
+    }
 }
 
 .item {