Skip to content

Commit 991bfa7

Browse files
nikkyeyanikkyeya
committed
fix
1 parent 0807ea4 commit 991bfa7

File tree

10 files changed

+427
-167
lines changed

10 files changed

+427
-167
lines changed

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

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
getCoinDetails,
33
getCoinOHLC,
44
fetchPools,
5-
} from '@/lib/ coingecko.actions';
5+
} from '@/lib/coingecko.actions';
66
import { formatPrice, timeAgo } from '@/lib/utils';
77
import { ArrowUpRight } from 'lucide-react';
88
import Link from 'next/link';
@@ -47,7 +47,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
4747
};
4848

4949
return (
50-
<main className='py-12 container size-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-center gap-6 xl:gap-10 justify-center'>
50+
<main className='coin-details-main'>
5151
<section className='size-full xl:col-span-2'>
5252
<LiveDataWrapper
5353
coinOHLCData={coinOHLCData}
@@ -58,16 +58,16 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
5858
{/* Exchange Listings */}
5959
<div className='w-full mt-8 space-y-4'>
6060
<h4 className='text-2xl'>Exchange Listings</h4>
61-
<div className='custom-scrollbar bg-dark-500 rounded-xl overflow-hidden'>
61+
<div className='custom-scrollbar exchange-container'>
6262
<Table>
6363
<TableHeader className='text-purple-100'>
6464
<TableRow className='hover:bg-transparent'>
65-
<TableHead className='pl-5 py-5 text-purple-100'>
65+
<TableHead className='exchange-header-left'>
6666
Exchange
6767
</TableHead>
6868
<TableHead className='text-purple-100'>Pair</TableHead>
6969
<TableHead className='text-purple-100'>Price</TableHead>
70-
<TableHead className='pr-5 text-purple-100 text-end'>
70+
<TableHead className='exchange-header-right'>
7171
Last Traded
7272
</TableHead>
7373
</TableRow>
@@ -84,18 +84,18 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
8484
<Link
8585
href={ticker.trade_url}
8686
target='_blank'
87-
className='py-4 pl-3 block max-w-[110px] truncate'
87+
className='exchange-link'
8888
>
8989
{ticker.market.name}
9090
</Link>
9191
</TableCell>
92-
<TableCell className='font-medium truncate max-w-[100%] py-4 pr-5'>
92+
<TableCell className='exchange-pair'>
9393
{ticker.base} / {ticker.target}
9494
</TableCell>
9595
<TableCell className='font-medium'>
9696
{formatPrice(ticker.converted_last.usd)}
9797
</TableCell>
98-
<TableCell className='pr-5 text-end'>
98+
<TableCell className='exchange-timestamp'>
9999
{timeAgo(ticker.timestamp)}
100100
</TableCell>
101101
</TableRow>
@@ -110,7 +110,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
110110
<section className='size-full max-lg:mt-8 lg:col-span-1'>
111111
{/* Converter */}
112112
<div className='w-full space-y-5'>
113-
<h4 className='text-2xl font-semibold'>
113+
<h4 className='converter-title'>
114114
{coin.symbol.toUpperCase()} Converter
115115
</h4>
116116
<Converter
@@ -123,27 +123,27 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
123123
{/* Coin Details */}
124124
<div className='w-full mt-8 space-y-4'>
125125
<h4 className='text-2xl'>Coin Details</h4>
126-
<div className='rounded-lg grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 gap-3 sm:gap-5'>
127-
<div className='text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3'>
126+
<div className='coin-details-grid'>
127+
<div className='detail-card'>
128128
<p className='text-purple-100'>Market Cap</p>
129129
<p className='text-base font-medium'>
130130
{formatPrice(coin.marketCap)}
131131
</p>
132132
</div>
133-
<div className='text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3'>
133+
<div className='detail-card'>
134134
<p className='text-purple-100 '>Market Cap Rank</p>
135135
<p className='text-base font-bold'># {coin.marketCapRank}</p>
136136
</div>
137-
<div className='text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3'>
137+
<div className='detail-card'>
138138
<p className='text-purple-100 '>Total Volume</p>
139139
<p className='text-base font-medium'>
140140
{formatPrice(coin.totalVolume)}
141141
</p>
142142
</div>
143-
<div className='text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3'>
143+
<div className='detail-card'>
144144
<p className='text-purple-100 '>Website</p>
145145
{coin.website ? (
146-
<div className='flex items-center text-green-500 gap-1'>
146+
<div className='detail-link'>
147147
<Link href={coin.website} target='_blank'>
148148
Website
149149
</Link>
@@ -153,10 +153,10 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
153153
'-'
154154
)}
155155
</div>
156-
<div className='text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3'>
156+
<div className='detail-card'>
157157
<p className='text-purple-100 '>Explorer</p>
158158
{coin.explorer ? (
159-
<div className='flex items-center text-green-500 gap-1'>
159+
<div className='detail-link'>
160160
<Link href={coin.explorer} target='_blank'>
161161
Explorer
162162
</Link>
@@ -166,10 +166,10 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
166166
'-'
167167
)}
168168
</div>
169-
<div className='text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3'>
169+
<div className='detail-card'>
170170
<p className='text-purple-100 '>Community Link</p>
171171
{coin.communityLink ? (
172-
<div className='flex items-center text-green-500 gap-1'>
172+
<div className='detail-link'>
173173
<Link href={coin.communityLink} target='_blank'>
174174
Community
175175
</Link>
@@ -182,9 +182,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
182182
</div>
183183
</div>
184184

185-
<p className='mt-8 text-sm font-sans text-purple-50 leading-[30px]'>
186-
{coin.description}
187-
</p>
185+
<p className='coin-description'>{coin.description}</p>
188186
</section>
189187
</main>
190188
);

‎app/coins/page.tsx‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getCoinList } from '@/lib/ coingecko.actions';
1+
import { getCoinList } from '@/lib/coingecko.actions';
22
import {
33
Table,
44
TableBody,
@@ -33,24 +33,18 @@ const Coins = async ({
3333
currentPage >= 100 ? Math.ceil(currentPage / 100) * 100 + 100 : 100;
3434

3535
return (
36-
<main className='py-12 container size-full items-center gap-10 justify-center'>
36+
<main className='coins-main'>
3737
<div className='flex flex-col w-full space-y-5'>
3838
<h4 className='text-2xl'>All Coins</h4>
39-
<div className='bg-dark-500 rounded-xl custom-scrollbar max-h-fit overflow-hidden'>
39+
<div className='custom-scrollbar coins-container'>
4040
<Table>
41-
<TableHeader className='bg-dark-400 text-purple-100'>
42-
<TableRow className='hover:bg-transparent !border-purple-600 '>
43-
<TableHead className='pl-5 py-4 text-purple-100'>
44-
Rank
45-
</TableHead>
41+
<TableHeader className='coins-header'>
42+
<TableRow className='coins-header-row'>
43+
<TableHead className='coins-header-left'>Rank</TableHead>
4644
<TableHead className='text-purple-100'>Token</TableHead>
4745
<TableHead className='text-purple-100'>Price</TableHead>
48-
<TableHead className='pr-8 text-purple-100'>
49-
24h Change
50-
</TableHead>
51-
<TableHead className='pr-8 text-purple-100'>
52-
Market Cap
53-
</TableHead>
46+
<TableHead className='coins-header-right'>24h Change</TableHead>
47+
<TableHead className='coins-header-right'>Market Cap</TableHead>
5448
</TableRow>
5549
</TableHeader>
5650
<TableBody>
@@ -60,13 +54,13 @@ const Coins = async ({
6054
<ClickableTableRow
6155
key={coin.id}
6256
href={`/coins/${coin.id}`}
63-
className='text-lg hover:!bg-dark-400/30 !border-purple-600 cursor-pointer'
57+
className='coins-row'
6458
>
65-
<TableCell className='pl-5 !max-w-[80px] py-5 font-medium text-purple-100'>
59+
<TableCell className='coins-rank'>
6660
#{coin.market_cap_rank}
6761
</TableCell>
68-
<TableCell className='py-3 font-semibold'>
69-
<div className='flex items-center gap-3'>
62+
<TableCell className='coins-token'>
63+
<div className='coins-token-info'>
7064
<Image
7165
src={coin.image}
7266
alt={coin.name}
@@ -78,12 +72,12 @@ const Coins = async ({
7872
</p>
7973
</div>
8074
</TableCell>
81-
<TableCell className='py-4 font-medium'>
75+
<TableCell className='coins-price'>
8276
{formatPrice(coin.current_price)}
8377
</TableCell>
8478
<TableCell className='font-medium'>
8579
<span
86-
className={cn('flex gap-1 items-center font-medium', {
80+
className={cn('coins-change', {
8781
'text-green-600': isTrendingUp,
8882
'text-red-500': !isTrendingUp,
8983
})}
@@ -92,7 +86,7 @@ const Coins = async ({
9286
{formatPercentage(coin.price_change_percentage_24h)}
9387
</span>
9488
</TableCell>
95-
<TableCell className='pr-5 font-medium'>
89+
<TableCell className='coins-market-cap'>
9690
{formatPrice(coin.market_cap)}
9791
</TableCell>
9892
</ClickableTableRow>

0 commit comments

Comments
 (0)