Skip to content

Commit ddfba21

Browse files
nikkyeyanikkyeya
committed
fix
1 parent 8321242 commit ddfba21

File tree

6 files changed

+187
-6
lines changed

6 files changed

+187
-6
lines changed

‎app/coins/[id]/page.tsx‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
import { formatPrice, timeAgo } from '@/lib/utils';
88
import Link from 'next/link';
99
import CoinDetailCard from '@/components/CoinDetailCard';
10+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
1011
import {
1112
Table,
1213
TableBody,
@@ -179,7 +180,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
179180
</div>
180181

181182
{/* Top Gainers */}
182-
<div className='space-y-6 mt-8'>
183+
{/* <div className='space-y-6 mt-8'>
183184
<h4 className='section-title'>Top Gainers</h4>
184185
<div className='top-gainers-list'>
185186
{topGainersLosers.top_gainers.map(
@@ -198,7 +199,58 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
198199
)
199200
)}
200201
</div>
201-
</div>
202+
</div> */}
203+
204+
<Tabs defaultValue='top-gainers' className='mt-8 w-full'>
205+
<TabsList className='size-full p-1 bg-transparent border-b border-dark-500 rounded-none '>
206+
<TabsTrigger
207+
value='top-gainers'
208+
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'
209+
>
210+
Top Gainers
211+
</TabsTrigger>
212+
<TabsTrigger
213+
value='top-losers'
214+
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'
215+
>
216+
Top Losers
217+
</TabsTrigger>
218+
</TabsList>
219+
<TabsContent value='top-gainers' className='top-list'>
220+
{topGainersLosers.top_gainers.map(
221+
(coin: TopGainersLosersResponse) => (
222+
<CoinCard
223+
key={coin.id}
224+
id={coin.id}
225+
name={coin.name}
226+
symbol={coin.symbol}
227+
image={coin.image}
228+
price={coin.usd}
229+
priceChangePercentage24h={coin.usd_24h_change}
230+
volume24={coin.usd_24h_vol}
231+
rank={coin.market_cap_rank}
232+
/>
233+
)
234+
)}
235+
</TabsContent>
236+
<TabsContent value='top-losers' className='top-list'>
237+
{topGainersLosers.top_losers.map(
238+
(coin: TopGainersLosersResponse) => (
239+
<CoinCard
240+
key={coin.id}
241+
id={coin.id}
242+
name={coin.name}
243+
symbol={coin.symbol}
244+
image={coin.image}
245+
price={coin.usd}
246+
priceChangePercentage24h={coin.usd_24h_change}
247+
volume24={coin.usd_24h_vol}
248+
rank={coin.market_cap_rank}
249+
/>
250+
)
251+
)}
252+
</TabsContent>
253+
</Tabs>
202254
</section>
203255
</main>
204256
);

‎app/globals.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,8 +193,8 @@
193193
@apply w-full grid grid-cols-1 sm:grid-cols-2 mt-5 gap-4 md:gap-6;
194194
}
195195

196-
.top-gainers-list {
197-
@apply gap-4 md:gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-1 grid;
196+
.top-list {
197+
@apply gap-4 mt-2 md:gap-5 sm:grid-cols-2 lg:grid-cols-1 grid;
198198
}
199199

200200
.table-header-cell {

‎app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ const Home = async () => {
3636
coinId='bitcoin'
3737
/>
3838

39-
{/* Top Movers */}
39+
{/* Trending Coins */}
4040
<div className='top-movers-container'>
41-
<h4 className='section-title px-5'>Top Movers</h4>
41+
<h4 className='section-title px-5'>Trending Coins</h4>
4242
<div className='table-scrollbar-container custom-scrollbar'>
4343
<Table>
4444
<TableHeader className='table-header-cell'>

‎components/ui/tabs.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as TabsPrimitive from "@radix-ui/react-tabs"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
function Tabs({
9+
className,
10+
...props
11+
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
12+
return (
13+
<TabsPrimitive.Root
14+
data-slot="tabs"
15+
className={cn("flex flex-col gap-2", className)}
16+
{...props}
17+
/>
18+
)
19+
}
20+
21+
function TabsList({
22+
className,
23+
...props
24+
}: React.ComponentProps<typeof TabsPrimitive.List>) {
25+
return (
26+
<TabsPrimitive.List
27+
data-slot="tabs-list"
28+
className={cn(
29+
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
30+
className
31+
)}
32+
{...props}
33+
/>
34+
)
35+
}
36+
37+
function TabsTrigger({
38+
className,
39+
...props
40+
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
41+
return (
42+
<TabsPrimitive.Trigger
43+
data-slot="tabs-trigger"
44+
className={cn(
45+
"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",
46+
className
47+
)}
48+
{...props}
49+
/>
50+
)
51+
}
52+
53+
function TabsContent({
54+
className,
55+
...props
56+
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
57+
return (
58+
<TabsPrimitive.Content
59+
data-slot="tabs-content"
60+
className={cn("flex-1 outline-none", className)}
61+
{...props}
62+
/>
63+
)
64+
}
65+
66+
export { Tabs, TabsList, TabsTrigger, TabsContent }

‎package-lock.json‎

Lines changed: 62 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@radix-ui/react-select": "^2.2.6",
1414
"@radix-ui/react-separator": "^1.1.8",
1515
"@radix-ui/react-slot": "^1.2.4",
16+
"@radix-ui/react-tabs": "^1.1.13",
1617
"class-variance-authority": "^0.7.1",
1718
"clsx": "^2.1.1",
1819
"cmdk": "^1.1.1",

0 commit comments

Comments
 (0)