refactor: topgainerslosers styles

Author: sujatagunale

app/globals.css

@@ -150,7 +150,7 @@
   }
 }
 
-@layer utilities {
+@layer components {
   .container {
     @apply px-4 sm:px-6 mx-auto max-w-[1440px];
   }
@@ -456,10 +456,10 @@
       }
 
       .select-trigger {
-        @apply w-fit border-none cursor-pointer h-12! bg-dark-400! hover:bg-dark-400! focus-visible:ring-0!;
+        @apply w-fit! border-none! cursor-pointer! h-12! bg-dark-400! hover:bg-dark-400! focus-visible:ring-0!;
 
         .select-value {
-          @apply font-semibold text-xs text-purple-100;
+          @apply font-semibold! text-xs! text-purple-100!;
         }
       }
 
@@ -473,6 +473,23 @@
     }
   }
 
+  /* TopGainersLosers Component Utilities */
+  #top-gainers-losers {
+    @apply mt-8 w-full;
+
+    .tabs-list {
+      @apply size-full! p-1! bg-transparent! border-b! border-dark-500! rounded-none!;
+    }
+
+    .tabs-trigger {
+      @apply data-[state=active]:border-none! data-[state=active]:bg-transparent! flex justify-start! mb-0! py-2! text-lg! font-semibold! md:text-2xl!;
+    }
+
+    .tabs-content {
+      @apply gap-4! mt-2! md:gap-5! sm:grid-cols-2! lg:grid-cols-1! grid!;
+    }
+  }
+
   /* CoinHeader Component Utilities */
   .coin-header-container {
     @apply space-y-5 w-full;

components/coin-details/TopGainersLosers.tsx

@@ -25,20 +25,21 @@ export const TopGainersLosers = async () => {
   const topGainersLosers = await getTopGainersLosers();
 
   return (
-    <Tabs defaultValue='top-gainers' className='mt-8 w-full'>
-      <TabsList className='size-full p-1 bg-transparent border-b border-dark-500 rounded-none '>
+    <Tabs defaultValue='top-gainers' id='top-gainers-losers'>
+      <TabsList className='tabs-list'>
         {TAB_CONFIG.map((tab) => (
           <TabsTrigger
             key={tab.value}
             value={tab.value}
-            className='data-[state=active]:border-none! data-[state=active]:bg-transparent! flex justify-start mb-0! py-2 text-lg font-semibold md:text-2xl'
+            className='tabs-trigger'
           >
             {tab.label}
           </TabsTrigger>
         ))}
       </TabsList>
+
       {TAB_CONFIG.map((tab) => (
-        <TabsContent key={tab.value} value={tab.value} className='top-list'>
+        <TabsContent key={tab.value} value={tab.value} className='tabs-content'>
           {topGainersLosers[tab.key].map(renderCoinCard)}
         </TabsContent>
       ))}