fix

Author: nikkyeya

app/coins/[id]/page.tsx

@@ -7,6 +7,7 @@ import {
 import { formatPrice, timeAgo } from '@/lib/utils';
 import Link from 'next/link';
 import CoinDetailCard from '@/components/CoinDetailCard';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   Table,
   TableBody,
@@ -179,7 +180,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
         </div>
 
         {/* Top Gainers */}
-        <div className='space-y-6 mt-8'>
+        {/* <div className='space-y-6 mt-8'>
           <h4 className='section-title'>Top Gainers</h4>
           <div className='top-gainers-list'>
             {topGainersLosers.top_gainers.map(
@@ -198,7 +199,58 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
               )
             )}
           </div>
-        </div>
+        </div> */}
+
+        <Tabs defaultValue='top-gainers' className='mt-8  w-full'>
+          <TabsList className='size-full p-1 bg-transparent border-b border-dark-500 rounded-none '>
+            <TabsTrigger
+              value='top-gainers'
+              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'
+            >
+              Top Gainers
+            </TabsTrigger>
+            <TabsTrigger
+              value='top-losers'
+              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'
+            >
+              Top Losers
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value='top-gainers' className='top-list'>
+            {topGainersLosers.top_gainers.map(
+              (coin: TopGainersLosersResponse) => (
+                <CoinCard
+                  key={coin.id}
+                  id={coin.id}
+                  name={coin.name}
+                  symbol={coin.symbol}
+                  image={coin.image}
+                  price={coin.usd}
+                  priceChangePercentage24h={coin.usd_24h_change}
+                  volume24={coin.usd_24h_vol}
+                  rank={coin.market_cap_rank}
+                />
+              )
+            )}
+          </TabsContent>
+          <TabsContent value='top-losers' className='top-list'>
+            {topGainersLosers.top_losers.map(
+              (coin: TopGainersLosersResponse) => (
+                <CoinCard
+                  key={coin.id}
+                  id={coin.id}
+                  name={coin.name}
+                  symbol={coin.symbol}
+                  image={coin.image}
+                  price={coin.usd}
+                  priceChangePercentage24h={coin.usd_24h_change}
+                  volume24={coin.usd_24h_vol}
+                  rank={coin.market_cap_rank}
+                />
+              )
+            )}
+          </TabsContent>
+        </Tabs>
       </section>
     </main>
   );

app/globals.css

@@ -193,8 +193,8 @@
     @apply w-full grid grid-cols-1 sm:grid-cols-2 mt-5 gap-4 md:gap-6;
   }
 
-  .top-gainers-list {
-    @apply gap-4 md:gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-1 grid;
+  .top-list {
+    @apply gap-4 mt-2 md:gap-5 sm:grid-cols-2 lg:grid-cols-1 grid;
   }
 
   .table-header-cell {

app/page.tsx

@@ -36,9 +36,9 @@ const Home = async () => {
           coinId='bitcoin'
         />
 
-        {/* Top Movers */}
+        {/* Trending Coins */}
         <div className='top-movers-container'>
-          <h4 className='section-title px-5'>Top Movers</h4>
+          <h4 className='section-title px-5'>Trending Coins</h4>
           <div className='table-scrollbar-container custom-scrollbar'>
             <Table>
               <TableHeader className='table-header-cell'>

components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package-lock.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",