öeaderboard stats adjustments & filter dropdown

ethereumfollowprotocol · Dec 5, 2024 · 1501ad8 · 1501ad8
1 parent 20ea866
commit 1501ad8
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 35 deletions.
diff --git a/src/app/leaderboard/components/filters.tsx b/src/app/leaderboard/components/filters.tsx
@@ -1,7 +1,10 @@
-import React from 'react'
 import Image from 'next/image'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { IoIosArrowDown } from 'react-icons/io'
+import { useClickAway } from '@uidotdev/usehooks'
 
+import { cn } from '#/lib/utilities'
 import type { LeaderboardFilter } from '#/types/common'
 import { leaderboardFiltersEmojies, leaderboardFilters } from '#/lib/constants'
 
@@ -11,22 +14,59 @@ interface FiltersProps {
 }
 
 const Filters: React.FC<FiltersProps> = ({ filter, onSelectFilter }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const clickAwayRef = useClickAway<HTMLDivElement>(() => setIsDropdownOpen(false))
+
   const { t } = useTranslation()
 
   return (
-    <div className='flex w-full flex-wrap justify-center items-center gap-4'>
-      {leaderboardFilters.map((item, i) => (
+    <div ref={clickAwayRef} className='relative w-full md:w-64 z-40 mx-auto max-w-108'>
+      <div
+        onClick={() => setIsDropdownOpen(prev => !prev)}
+        className='flex w-full cursor-pointer flex-wrap h-[50px] z-30 justify-between px-3 glass-card border-grey hover:border-text/80 transition-colors rounded-xl border-[3px] bg-neutral items-center gap-4'
+      >
         <div
-          key={item}
-          className={`p-2 font-bold px-4 flex gap-1 justify-center capitalize cursor-pointer transition-all rounded-full ${
-            filter === item ? 'bg-text-neutral shadow-inner' : 'bg-grey hover:scale-110'
-          }`}
-          onClick={() => onSelectFilter(item)}
+          key={filter}
+          className={`font-bold flex gap-1 justify-center capitalize cursor-pointer transition-all rounded-full`}
+          onClick={() => onSelectFilter(filter)}
         >
-          <p className='text-nowrap'>{t(item)}</p>
-          <Image src={leaderboardFiltersEmojies[i]} alt={item} width={22} height={22} />
+          <p className='text-nowrap'>{t(filter)}</p>
+          <Image
+            src={leaderboardFiltersEmojies[leaderboardFilters.indexOf(filter)]}
+            alt={filter}
+            width={22}
+            height={22}
+          />
+        </div>
+        <IoIosArrowDown className='w-4 h-4' />
+      </div>
+      <div
+        className={cn(
+          'absolute top-1/2 rounded-xl glass-card left-0 bg-neutral border-grey border-[3px] -z-10 w-full h-fit pt-5 transition-all',
+          isDropdownOpen ? 'flex' : 'hidden pointer-events-none'
+        )}
+      >
+        <div className='flex w-full flex-col'>
+          {leaderboardFilters.map(item => (
+            <div
+              key={item}
+              onClick={() => {
+                onSelectFilter(item)
+                setIsDropdownOpen(false)
+              }}
+              className='flex items-center gap-2 p-4 w-full rounded-lg hover:bg-text/10'
+            >
+              <p className='font-bold text-lg'>{t(item)}</p>
+              <Image
+                src={leaderboardFiltersEmojies[leaderboardFilters.indexOf(item)]}
+                alt={item}
+                width={22}
+                height={22}
+              />
+            </div>
+          ))}
         </div>
-      ))}
+      </div>
     </div>
   )
 }

diff --git a/src/app/leaderboard/components/table.tsx b/src/app/leaderboard/components/table.tsx
@@ -70,11 +70,11 @@ const LeaderboardTable = () => {
   return (
     <Fragment>
       <p className='text-3xl sm:text-4xl font-bold'>{t('leaderboard')}</p>
-      <div className='mt-4 sm:mt-6 mb-4 sm:mb-6 lg:mb-0 flex items-center justify-center flex-wrap gap-4 xs:gap-8'>
+      <div className='mt-4 sm:mt-6 mb-4 sm:mb-6 lg:mb-0 flex items-center justify-center flex-wrap gap-4 sm:gap-8'>
         {LeaderboardStatNames.map((name, i) => (
           <div
             key={`stat ${i}`}
-            className='gradient-border flex flex-col rounded-2xl items-center justify-center h-28 w-full xs:w-56'
+            className='gradient-border flex flex-col rounded-2xl items-center justify-center h-28 w-[47.5%] sm:w-56'
           >
             {isLeaderboardStatsLoading || !leaderboardStats ? (
               <LoadingCell className='h-8 w-24 rounded-lg' />
@@ -87,17 +87,17 @@ const LeaderboardTable = () => {
           </div>
         ))}
       </div>
-      <div className='flex w-full gap-1.5 justify-center lg:justify-end max-w-[1300px] text-sm mt-4 font-bold text-[#aaaaaa] md:text-[#CDCDCD] italic'>
+      <div className='flex w-full gap-1.5 justify-center md:justify-end max-w-[1300px] text-sm mt-4 font-bold text-[#aaaaaa] md:text-[#CDCDCD] italic'>
         {t('last updated')}
         <span>
           {isLeaderboardLoading ? <LoadingCell className='h-5 w-16 rounded-md' /> : timeStamp}
         </span>
       </div>
-      <div className='flex flex-col gap-6 w-full max-w-[1300px]'>
-        <div className='flex xl:hidden'>
+      <div className='flex flex-col gap-2 w-full max-w-[1300px]'>
+        <div className='flex md:hidden'>
           <Filters filter={filter} onSelectFilter={onSelectFilter} />
         </div>
-        <div className='flex justify-between gap-4'>
+        <div className='flex justify-between gap-2'>
           <div className='relative w-full sm:w-[260px] 2xl:w-[300px]'>
             <div className='rounded-xl w-full group glass-card overflow-hidden border-[3px] border-grey sm:text-sm focus:border-text/80 hover:border-text/80 focus-within:border-text/80 transition-colors'>
               <div
@@ -119,26 +119,28 @@ const LeaderboardTable = () => {
               />
             </div>
           </div>
-          <div className='hidden xl:flex'>
-            <Filters filter={filter} onSelectFilter={onSelectFilter} />
+          <div className='flex items-center gap-4'>
+            <div className='hidden md:flex'>
+              <Filters filter={filter} onSelectFilter={onSelectFilter} />
+            </div>
+            <PageSelector
+              page={page}
+              setPage={setPage}
+              hasNextPage={true}
+              scrollUp={true}
+              isLoading={isFetchingNextLeaderboard || isFetchingPreviousLeaderboard}
+              fetchNext={() => {
+                setChunk(1)
+                fetchNextLeaderboard()
+              }}
+              fetchPrevious={() => {
+                setChunk(1)
+                fetchPreviousLeaderboard()
+              }}
+            />
           </div>
-          <PageSelector
-            page={page}
-            setPage={setPage}
-            hasNextPage={true}
-            scrollUp={true}
-            isLoading={isFetchingNextLeaderboard || isFetchingPreviousLeaderboard}
-            fetchNext={() => {
-              setChunk(1)
-              fetchNextLeaderboard()
-            }}
-            fetchPrevious={() => {
-              setChunk(1)
-              fetchPreviousLeaderboard()
-            }}
-          />
         </div>
-        <div className='glass-card border-grey border-[3px] rounded-xl flex flex-col gap-4 p-1 sm:px-4 sm:py-6 lg:px-8 relative'>
+        <div className='glass-card border-grey mt-1 border-[3px] rounded-xl flex flex-col gap-4 p-1 sm:px-4 sm:py-6 lg:px-8 relative'>
           {leaderboard
             ?.slice(0, chunk * LEADERBOARD_CHUNK_SIZE)
             .map((entry: LeaderboardItem, index) => (