From a3eab1e8b3329b4c325fb7c1e541c54aa7f348dd Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 3 Feb 2022 19:12:57 +0200
Subject: [PATCH] feat: make categories chips jumb to respective section

---
 src/pages/ExplorePage/Categories/Categories.tsx   | 6 +-----
 src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/ExplorePage/Categories/Categories.tsx b/src/pages/ExplorePage/Categories/Categories.tsx
index c169b1c..5a61b9d 100644
--- a/src/pages/ExplorePage/Categories/Categories.tsx
+++ b/src/pages/ExplorePage/Categories/Categories.tsx
@@ -8,9 +8,7 @@ export default function Categories() {
 
     const { data, loading } = useQuery<ALL_CATEGORIES_QUERY_RES>(ALL_CATEGORIES_QUERY);
 
-    const handleClick = (categoryId: string) => {
 
-    }
 
     if (loading || !data)
         return <div className="flex gap-12">
@@ -20,12 +18,10 @@ export default function Categories() {
         </div>
 
     return (
-        // <div className="flex gap-12 flex-wrap">
         <Slider>
             {data?.allCategories.map(category =>
-                <Badge key={category.id} onClick={() => handleClick(category.id)}>{category.title}</Badge>
+                <Badge key={category.id} onClick={() => document.getElementById(category.title.toLowerCase())?.scrollIntoView({ behavior: 'smooth', block: 'center' })} >{category.title}</Badge>
             )}
         </Slider>
-        // </div>
     )
 }
diff --git a/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
index 2af12e6..a5d0902 100644
--- a/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -56,7 +56,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
 
 
     return (
-        <div className='mb-48'>
+        <div id={title.toString().toLowerCase()} className='mb-48'>
             <h3 className="font-bolder text-body3 mb-24 px-32">{title}
                 <span>
                     <MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer align-bottom transform scale-y-110 scale-x-125 origin-left' onClick={() => {