refactor: trendingcoins styles

Author: sujatagunale

app/globals.css

@@ -233,6 +233,50 @@
     }
   }
 
+  #trending-coins {
+    @apply w-full flex flex-col justify-center h-full py-4 bg-dark-500 rounded-xl;
+
+    h4 {
+      @apply text-xl md:text-2xl font-semibold mb-2 px-5;
+    }
+
+    .trending-coins-table {
+      @apply bg-dark-500 overflow-hidden;
+
+      .body-row {
+        @apply overflow-hidden border-none hover:bg-dark-400! rounded-lg;
+      }
+
+      .name-cell {
+        @apply font-bold;
+
+        a {
+          @apply pl-1 md:pl-2 py-1 md:py-2 xl:py-1 flex items-center gap-2 md:gap-3;
+
+          img {
+            @apply rounded-full size-8 md:size-9;
+          }
+
+          p {
+            @apply text-sm md:text-base;
+          }
+        }
+      }
+
+      .change-cell {
+        @apply font-medium py-4 pr-3 md:pr-5;
+      }
+
+      .price-cell {
+        @apply font-bold pr-5 text-sm max-w-full truncate;
+      }
+
+      .price-change {
+        @apply flex gap-1 items-center text-sm font-medium;
+      }
+    }
+  }
+
   .table-header-cell {
     @apply text-purple-100;
   }

components/DataTable.tsx

@@ -19,7 +19,7 @@ export const DataTable = <T,>({
   bodyRowClassName,
 }: DataTableProps<T>) => {
   return (
-    <Table className={tableClassName}>
+    <Table className={cn('custom-scrollbar', tableClassName)}>
       <TableHeader className={headerClassName}>
         <TableRow className={cn('hover:bg-transparent!', headerRowClassName)}>
           {columns.map((column, columnIndex) => (

components/home/TrendingCoins.tsx

@@ -1,46 +1,40 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+
 import { DataTable } from '@/components/DataTable';
 import { getTrendingCoins } from '@/lib/coingecko.actions';
 import { cn, formatPercentage, formatPrice } from '@/lib/utils';
-import { TrendingDown, TrendingUp } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
 
 export const TrendingCoins = async () => {
   const trendingCoins = (await getTrendingCoins()) as TrendingCoin[];
+
   const columns = [
     {
       header: 'Name',
-      cellClassName: 'font-bold',
+      cellClassName: 'name-cell',
       cell: (coin: TrendingCoin) => {
         const item = coin.item;
 
         return (
-          <Link href={`/coins/${item.id}`} className='coin-link'>
-            <Image
-              src={item.large}
-              alt={item.name}
-              width={36}
-              height={36}
-              className='coin-image'
-            />
-            <div>
-              <p className='text-sm md:text-base'>{item.name}</p>
-            </div>
+          <Link href={`/coins/${item.id}`}>
+            <Image src={item.large} alt={item.name} width={36} height={36} />
+            <p>{item.name}</p>
           </Link>
         );
       },
     },
     {
       header: '24h Change',
-      cellClassName: 'table-cell-change',
+      cellClassName: 'change-cell',
       cell: (coin: TrendingCoin) => {
         const item = coin.item;
         const isTrendingUp = item.data.price_change_percentage_24h.usd > 0;
 
         return (
           <div
             className={cn(
-              'price-change-indicator',
+              'price-change',
               isTrendingUp ? 'text-green-500' : 'text-red-500'
             )}
           >
@@ -56,26 +50,24 @@ export const TrendingCoins = async () => {
     },
     {
       header: 'Price',
-      cellClassName: 'table-cell-price',
+      cellClassName: 'price-cell',
       cell: (coin: TrendingCoin) => {
         return formatPrice(coin.item.data.price);
       },
     },
   ];
 
   return (
-    <div className='top-movers-container'>
-      <h4 className='section-title px-5'>Trending Coins</h4>
-      <div className='table-scrollbar-container custom-scrollbar'>
-        <DataTable
-          columns={columns}
-          data={trendingCoins.slice(0, 6)}
-          rowKey={(_, index) => index}
-          headerClassName='table-header-cell'
-          headerRowClassName='hover:bg-transparent'
-          bodyRowClassName='table-row-hover'
-        />
-      </div>
+    <div id='trending-coins'>
+      <h4>Trending Coins</h4>
+
+      <DataTable
+        tableClassName='trending-coins-table'
+        columns={columns}
+        data={trendingCoins.slice(0, 6)}
+        rowKey={(_, index) => index}
+        bodyRowClassName='body-row'
+      />
     </div>
   );
 };