refactor: coinheader styles

Author: sujatagunale

app/globals.css

@@ -159,6 +159,18 @@
     @apply !bg-dark-500;
   }
 
+  .badge {
+    @apply font-medium mt-2 h-fit py-1 flex items-center gap-1;
+  }
+
+  .badge-up {
+    @apply bg-green-600/20! text-green-600!;
+  }
+
+  .badge-down {
+    @apply bg-red-500/20! text-red-500!;
+  }
+
   /* CandlestickChart Styles */
   #candlestick-chart {
     @apply p-3 mt-5 rounded-lg bg-dark-500;
@@ -213,18 +225,6 @@
 
       .change {
         @apply flex items-center gap-2;
-
-        .badge {
-          @apply font-medium! h-fit! py-1! flex! items-center! gap-1!;
-        }
-
-        .badge-up {
-          @apply bg-green-600/20! text-green-600!;
-        }
-
-        .badge-down {
-          @apply bg-red-500/20! text-red-500!;
-        }
       }
     }
 
@@ -628,65 +628,44 @@
   }
 
   /* CoinHeader Component Utilities */
-  .coin-header-container {
+  #coin-header {
     @apply space-y-5 w-full;
-  }
-
-  .coin-header-info {
-    @apply flex gap-3 items-center;
-  }
 
-  .coin-header-image {
-    @apply size-[45px] sm:size-[50px] xl:size-[77px];
-  }
-
-  .coin-header-price {
-    @apply text-3xl sm:text-5xl xl:text-6xl font-semibold;
-  }
-
-  .coin-header-badge {
-    @apply font-medium mt-2 h-fit py-1 flex items-center gap-1;
-  }
-
-  .coin-header-stats {
-    @apply grid grid-cols-3 mt-8 gap-4 sm:gap-6 w-fit;
-  }
-
-  .coin-header-stat {
-    @apply text-base border-r border-purple-600 flex flex-col gap-2;
-  }
+    h3 {
+      @apply text-3xl font-medium;
+    }
 
-  .coin-header-stat-label {
-    @apply text-purple-100 max-sm:text-sm;
-  }
+    .info {
+      @apply flex gap-3 items-center;
 
-  .coin-header-stat-value {
-    @apply flex flex-1 gap-1 items-end text-base font-medium;
-  }
+      img {
+        @apply size-[45px] sm:size-[50px] xl:size-[77px];
+      }
+    }
 
-  .coin-header-stat-value-30d {
-    @apply flex gap-1 flex-1 items-end text-base font-medium;
-  }
+    .price-row {
+      @apply flex gap-4;
 
-  .coin-header-stat-price {
-    @apply flex gap-1 items-center text-base font-medium;
-  }
+      h1 {
+        @apply text-3xl sm:text-5xl xl:text-6xl font-semibold;
+      }
+    }
 
-  /* Skeleton States */
-  .coin-header-skeleton-image {
-    @apply size-[45px] sm:size-[50px] xl:size-[77px] bg-dark-400/50 rounded-full animate-pulse;
-  }
+    .stats {
+      @apply grid grid-cols-3 mt-8 gap-4 sm:gap-6 w-fit;
 
-  .coin-header-skeleton-price {
-    @apply h-12 sm:h-16 xl:h-20 w-48 sm:w-64 xl:w-80 bg-dark-400/50 rounded animate-pulse;
-  }
+      li {
+        @apply text-base border-r last:border-none border-purple-600 flex flex-col gap-2;
 
-  .coin-header-skeleton-badge {
-    @apply h-10 w-32 bg-dark-400/50 rounded-full animate-pulse mt-2;
-  }
+        .label {
+          @apply text-purple-100 max-sm:text-sm;
+        }
 
-  .coin-header-skeleton-stat {
-    @apply h-5 w-24 bg-dark-400/50 rounded animate-pulse;
+        .value {
+          @apply flex gap-1 flex-1 items-end text-base font-medium;
+        }
+      }
+    }
   }
 
   /* CoinOverview Component Utilities */
@@ -717,6 +696,22 @@
   .skeleton {
     @apply bg-dark-400/60;
   }
+
+  .skeleton-image {
+    @apply size-[45px] sm:size-[50px] xl:size-[77px] bg-dark-400/50 rounded-full animate-pulse;
+  }
+
+  .skeleton-price {
+    @apply h-12 sm:h-16 xl:h-20 w-48 sm:w-64 xl:w-80 bg-dark-400/50 rounded animate-pulse;
+  }
+
+  .skeleton-badge {
+    @apply h-10 w-32 bg-dark-400/50 rounded-full animate-pulse mt-2;
+  }
+
+  .skeleton-stat {
+    @apply h-5 w-24 bg-dark-400/50 rounded animate-pulse;
+  }
 }
 
 /* Custom Scrollbar Styles */

components/CoinHeader.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { cn, formatPercentage, formatPrice } from '@/lib/utils';
-import { TrendingDown, TrendingUp } from 'lucide-react';
 import Image from 'next/image';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+
 import { Badge } from './ui/badge';
+import { cn, formatPercentage, formatPrice } from '@/lib/utils';
 
 export default function CoinHeader({
   livePriceChangePercentage24h,
@@ -23,48 +24,35 @@ export default function CoinHeader({
       value: livePriceChangePercentage24h,
       isUp: isTrendingUp,
       formatter: formatPercentage,
-      valueClassName: 'coin-header-stat-value',
       showIcon: true,
     },
     {
       label: '30 Days',
       value: priceChangePercentage30d,
       isUp: isThirtyDayUp,
       formatter: formatPercentage,
-      valueClassName: 'coin-header-stat-value-30d',
       showIcon: true,
     },
     {
       label: 'Price Change (24h)',
       value: priceChange24h,
       isUp: isPriceChangeUp,
       formatter: formatPrice,
-      valueClassName: 'coin-header-stat-price',
       showIcon: false,
     },
   ];
 
   return (
-    <div className='coin-header-container'>
-      <h3 className='text-3xl font-medium'>{name}</h3>
+    <div id='coin-header'>
+      <h3>{name}</h3>
+
+      <div className='info'>
+        <Image src={image} alt={name} width={77} height={77} />
 
-      <div className='coin-header-info'>
-        <Image
-          src={image}
-          alt={name}
-          width={77}
-          height={77}
-          className='coin-header-image'
-        />
-        <div className='flex gap-4'>
-          <h1 className='coin-header-price'>{formatPrice(livePrice)}</h1>
+        <div className='price-row'>
+          <h1>{formatPrice(livePrice)}</h1>
           <Badge
-            className={cn(
-              'coin-header-badge',
-              isTrendingUp
-                ? 'bg-green-600/20 text-green-600'
-                : 'bg-red-500/20 text-red-500'
-            )}
+            className={cn('badge', isTrendingUp ? 'badge-up' : 'badge-down')}
           >
             {formatPercentage(livePriceChangePercentage24h)}
             {isTrendingUp ? <TrendingUp /> : <TrendingDown />}
@@ -73,12 +61,13 @@ export default function CoinHeader({
         </div>
       </div>
 
-      <div className='coin-header-stats'>
+      <ul className='stats'>
         {stats.map((stat) => (
-          <div key={stat.label} className='coin-header-stat'>
-            <p className='coin-header-stat-label'>{stat.label}</p>
+          <li key={stat.label}>
+            <p className='label'>{stat.label}</p>
+
             <div
-              className={cn(stat.valueClassName, {
+              className={cn('value', {
                 'text-green-500': stat.isUp,
                 'text-red-500': !stat.isUp,
               })}
@@ -91,9 +80,9 @@ export default function CoinHeader({
                   <TrendingDown width={16} height={16} />
                 ))}
             </div>
-          </div>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }