Update TopVoters component to use page number for conditional styling

discordplace · May 6, 2024 · 86cebdd · 86cebdd
1 parent b542d5b
commit 86cebdd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/client/app/(bots)/bots/[id]/components/Tabs/TopVoters.jsx b/client/app/(bots)/bots/[id]/components/Tabs/TopVoters.jsx
@@ -57,9 +57,9 @@ export default function TopVoters({ bot }) {
                 'flex items-center w-full gap-4 p-4 odd:bg-secondary even:bg-tertiary',
                 index === 0 && 'rounded-t-xl',
                 index === voters.length - 1 && 'rounded-b-xl',
-                voters.length > 3 && bot.voters.indexOf(voter) === 0 && 'border-x-2 border-t-2 border-yellow-500 odd:bg-yellow-500/10',
-                voters.length > 3 && bot.voters.indexOf(voter) === 1 && 'border-x-2 border-gray-500 odd:bg-gray-500/10',
-                voters.length > 3 && bot.voters.indexOf(voter) === 2 && 'border-x-2 border-b-2 border-yellow-900 odd:bg-yellow-900/10'
+                page === 1 && voters.length > 3 && voters.indexOf(voter) === 0 && 'border-x-2 border-t-2 border-yellow-500 odd:bg-yellow-500/10',
+                page === 1 && voters.length > 3 && voters.indexOf(voter) === 1 && 'border-x-2 border-gray-500 odd:bg-gray-500/10',
+                page === 1 && voters.length > 3 && voters.indexOf(voter) === 2 && 'border-x-2 border-b-2 border-yellow-900 odd:bg-yellow-900/10'
               )}
             >
               <div className='relative'>
@@ -74,9 +74,9 @@ export default function TopVoters({ bot }) {
                 {[0, 1, 2].includes(bot.voters.indexOf(voter)) && (
                   <div className={cn(
                     'absolute top-0 left-0 w-full h-full rounded-full border-2',
-                    bot.voters.indexOf(voter) === 0 && 'border-yellow-500',
-                    bot.voters.indexOf(voter) === 1 && 'border-gray-500',
-                    bot.voters.indexOf(voter) === 2 && 'border-yellow-900'
+                    page === 1 && voters.indexOf(voter) === 0 && 'border-yellow-500',
+                    page === 1 && voters.indexOf(voter) === 1 && 'border-gray-500',
+                    page === 1 && voters.indexOf(voter) === 2 && 'border-yellow-900'
                   )} />
                 )}
               </div>

diff --git a/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx b/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx
@@ -57,9 +57,9 @@ export default function TopVoters({ server }) {
                 'flex items-center w-full gap-4 p-4 odd:bg-secondary even:bg-tertiary',
                 index === 0 && 'rounded-t-xl',
                 index === voters.length - 1 && 'rounded-b-xl',
-                voters.length > 3 && server.voters.indexOf(voter) === 0 && 'border-x-2 border-t-2 border-yellow-500 odd:bg-yellow-500/10',
-                voters.length > 3 && server.voters.indexOf(voter) === 1 && 'border-x-2 border-gray-500 odd:bg-gray-500/10',
-                voters.length > 3 && server.voters.indexOf(voter) === 2 && 'border-x-2 border-b-2 border-yellow-900 odd:bg-yellow-900/10'
+                page === 1 && voters.length > 3 && voters.indexOf(voter) === 0 && 'border-x-2 border-t-2 border-yellow-500 odd:bg-yellow-500/10',
+                page === 1 && voters.length > 3 && voters.indexOf(voter) === 1 && 'border-x-2 border-gray-500 odd:bg-gray-500/10',
+                page === 1 && voters.length > 3 && voters.indexOf(voter) === 2 && 'border-x-2 border-b-2 border-yellow-900 odd:bg-yellow-900/10'
               )}
             >
               <div className='relative'>
@@ -71,12 +71,12 @@ export default function TopVoters({ server }) {
                   className='rounded-full'
                 />
 
-                {[0, 1, 2].includes(server.voters.indexOf(voter)) && (
+                {[0, 1, 2].includes(voters.indexOf(voter)) && (
                   <div className={cn(
                     'absolute top-0 left-0 w-full h-full rounded-full border-2',
-                    server.voters.indexOf(voter) === 0 && 'border-yellow-500',
-                    server.voters.indexOf(voter) === 1 && 'border-gray-500',
-                    server.voters.indexOf(voter) === 2 && 'border-yellow-900'
+                    page === 1 && voters.indexOf(voter) === 0 && 'border-yellow-500',
+                    page === 1 && voters.indexOf(voter) === 1 && 'border-gray-500',
+                    page === 1 && voters.indexOf(voter) === 2 && 'border-yellow-900'
                   )} />
                 )}
               </div>