Skip to content

Commit 4d2e055

Browse files
nikkyeyanikkyeya
committed
fix
1 parent 991bfa7 commit 4d2e055

File tree

11 files changed

+263
-151
lines changed

11 files changed

+263
-151
lines changed

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

Lines changed: 76 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import {
22
getCoinDetails,
33
getCoinOHLC,
44
fetchPools,
5+
getTopGainersLosers,
56
} from '@/lib/coingecko.actions';
67
import { formatPrice, timeAgo } from '@/lib/utils';
7-
import { ArrowUpRight } from 'lucide-react';
88
import Link from 'next/link';
9+
import CoinDetailCard from '@/components/CoinDetailCard';
910
import {
1011
Table,
1112
TableBody,
@@ -16,10 +17,12 @@ import {
1617
} from '@/components/ui/table';
1718
import { Converter } from '@/components/Converter';
1819
import LiveDataWrapper from '@/components/LiveDataWrapper';
20+
import CoinCard from '@/components/CoinCard';
1921

2022
const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
2123
const { id } = await params;
2224
const coinData = await getCoinDetails(id);
25+
const topGainersLosers = await getTopGainersLosers();
2326
const coinOHLCData = await getCoinOHLC(id, 30, 'usd', 'hourly', 'full');
2427
const pool = await fetchPools(id);
2528

@@ -57,8 +60,8 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
5760
>
5861
{/* Exchange Listings */}
5962
<div className='w-full mt-8 space-y-4'>
60-
<h4 className='text-2xl'>Exchange Listings</h4>
61-
<div className='custom-scrollbar exchange-container'>
63+
<h4 className='section-title'>Exchange Listings</h4>
64+
<div className='custom-scrollbar mt-5 exchange-container'>
6265
<Table>
6366
<TableHeader className='text-purple-100'>
6467
<TableRow className='hover:bg-transparent'>
@@ -78,7 +81,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
7881
.map((ticker: Ticker, index: number) => (
7982
<TableRow
8083
key={index}
81-
className='overflow-hidden rounded-lg'
84+
className='overflow-hidden rounded-lg hover:!bg-dark-400/30'
8285
>
8386
<TableCell className=' text-green-500 font-bold'>
8487
<Link
@@ -90,7 +93,13 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
9093
</Link>
9194
</TableCell>
9295
<TableCell className='exchange-pair'>
93-
{ticker.base} / {ticker.target}
96+
<p className='truncate max-w-[100px]'>
97+
{ticker.base}
98+
</p>
99+
/
100+
<p className='truncate max-w-[100px] ml-2'>
101+
{ticker.target}
102+
</p>
94103
</TableCell>
95104
<TableCell className='font-medium'>
96105
{formatPrice(ticker.converted_last.usd)}
@@ -122,67 +131,72 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
122131

123132
{/* Coin Details */}
124133
<div className='w-full mt-8 space-y-4'>
125-
<h4 className='text-2xl'>Coin Details</h4>
134+
<h4 className='section-title pb-3'>Coin Details</h4>
126135
<div className='coin-details-grid'>
127-
<div className='detail-card'>
128-
<p className='text-purple-100'>Market Cap</p>
129-
<p className='text-base font-medium'>
130-
{formatPrice(coin.marketCap)}
131-
</p>
132-
</div>
133-
<div className='detail-card'>
134-
<p className='text-purple-100 '>Market Cap Rank</p>
135-
<p className='text-base font-bold'># {coin.marketCapRank}</p>
136-
</div>
137-
<div className='detail-card'>
138-
<p className='text-purple-100 '>Total Volume</p>
139-
<p className='text-base font-medium'>
140-
{formatPrice(coin.totalVolume)}
141-
</p>
142-
</div>
143-
<div className='detail-card'>
144-
<p className='text-purple-100 '>Website</p>
145-
{coin.website ? (
146-
<div className='detail-link'>
147-
<Link href={coin.website} target='_blank'>
148-
Website
149-
</Link>
150-
<ArrowUpRight size={16} />
151-
</div>
152-
) : (
153-
'-'
154-
)}
155-
</div>
156-
<div className='detail-card'>
157-
<p className='text-purple-100 '>Explorer</p>
158-
{coin.explorer ? (
159-
<div className='detail-link'>
160-
<Link href={coin.explorer} target='_blank'>
161-
Explorer
162-
</Link>
163-
<ArrowUpRight size={16} />
164-
</div>
165-
) : (
166-
'-'
167-
)}
168-
</div>
169-
<div className='detail-card'>
170-
<p className='text-purple-100 '>Community Link</p>
171-
{coin.communityLink ? (
172-
<div className='detail-link'>
173-
<Link href={coin.communityLink} target='_blank'>
174-
Community
175-
</Link>
176-
<ArrowUpRight size={16} />
177-
</div>
178-
) : (
179-
'-'
180-
)}
181-
</div>
136+
{[
137+
{
138+
label: 'Market Cap',
139+
value: formatPrice(coin.marketCap),
140+
},
141+
{
142+
label: 'Market Cap Rank',
143+
value: `# ${coin.marketCapRank}`,
144+
},
145+
{
146+
label: 'Total Volume',
147+
value: formatPrice(coin.totalVolume),
148+
},
149+
{
150+
label: 'Website',
151+
value: '-',
152+
link: coin.website,
153+
linkText: 'Website',
154+
},
155+
{
156+
label: 'Explorer',
157+
value: '-',
158+
link: coin.explorer,
159+
linkText: 'Explorer',
160+
},
161+
{
162+
label: 'Community Link',
163+
value: '-',
164+
link: coin.communityLink,
165+
linkText: 'Community',
166+
},
167+
].map((detail, index) => (
168+
<CoinDetailCard
169+
key={index}
170+
label={detail.label}
171+
value={detail.value}
172+
link={detail.link}
173+
linkText={detail.linkText}
174+
/>
175+
))}
182176
</div>
183177
</div>
184178

185-
<p className='coin-description'>{coin.description}</p>
179+
{/* Top Gainers */}
180+
<div className='space-y-6 mt-8'>
181+
<h4 className='section-title'>Top Gainers</h4>
182+
<div className='top-gainers-list'>
183+
{topGainersLosers.top_gainers.map(
184+
(coin: TopGainersLosersResponse) => (
185+
<CoinCard
186+
key={coin.id}
187+
id={coin.id}
188+
name={coin.name}
189+
symbol={coin.symbol}
190+
image={coin.image}
191+
price={coin.usd}
192+
priceChangePercentage24h={coin.usd_24h_change}
193+
volume24={coin.usd_24h_vol}
194+
rank={coin.market_cap_rank}
195+
/>
196+
)
197+
)}
198+
</div>
199+
</div>
186200
</section>
187201
</main>
188202
);

‎app/globals.css‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161

162162
/* CandlestickChart Styles */
163163
.candlestick-container {
164-
@apply p-3 rounded-lg bg-dark-500;
164+
@apply p-3 mt-5 rounded-lg bg-dark-500;
165165
}
166166

167167
.candlestick-header {
@@ -189,12 +189,12 @@
189189
}
190190

191191
/* Home Page Utilities */
192-
.section-title {
193-
@apply text-xl md:text-2xl;
192+
.card-grid {
193+
@apply w-full grid grid-cols-1 sm:grid-cols-2 mt-5 gap-4 md:gap-6;
194194
}
195195

196-
.card-grid {
197-
@apply w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6;
196+
.top-gainers-list {
197+
@apply gap-3 sm:gap-5 mt-5 sm:grid-cols-2 md:grid-cols-1 grid;
198198
}
199199

200200
.table-header-cell {
@@ -229,8 +229,8 @@
229229
@apply grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-start lg:items-center gap-6;
230230
}
231231

232-
.section-title-spacing {
233-
@apply text-xl md:text-2xl px-4 md:px-5 mb-2;
232+
.section-title {
233+
@apply text-xl md:text-2xl font-semibold mb-2;
234234
}
235235

236236
.table-scrollbar-container {
@@ -275,7 +275,7 @@
275275
}
276276

277277
.exchange-pair {
278-
@apply font-medium truncate max-w-[100%] py-4 pr-5;
278+
@apply font-medium flex py-4 pr-5;
279279
}
280280

281281
.exchange-timestamp {
@@ -495,15 +495,15 @@
495495
}
496496

497497
.coin-header-stat-value {
498-
@apply flex flex-1 gap-1 items-end text-sm font-medium;
498+
@apply flex flex-1 gap-1 items-end text-base font-medium;
499499
}
500500

501501
.coin-header-stat-value-30d {
502-
@apply flex gap-1 flex-1 items-end text-sm font-medium;
502+
@apply flex gap-1 flex-1 items-end text-base font-medium;
503503
}
504504

505505
.coin-header-stat-price {
506-
@apply flex gap-1 items-center text-sm font-medium;
506+
@apply flex gap-1 items-center text-base font-medium;
507507
}
508508

509509
/* Skeleton States */
@@ -522,6 +522,31 @@
522522
.coin-header-skeleton-stat {
523523
@apply h-5 w-24 bg-dark-400/50 rounded animate-pulse;
524524
}
525+
526+
/* ChartSection Component Utilities */
527+
.chart-section-container {
528+
@apply w-full h-full xl:col-span-2 px-2 py-3 bg-dark-500 rounded-xl;
529+
}
530+
531+
.chart-section-header {
532+
@apply flex-1 mb-2 flex gap-2 md:gap-3;
533+
}
534+
535+
.chart-section-image {
536+
@apply w-10 h-10 md:w-14 md:h-14;
537+
}
538+
539+
.chart-section-info {
540+
@apply flex flex-col;
541+
}
542+
543+
.chart-section-coin-name {
544+
@apply flex text-purple-100 text-xs md:text-sm w-fit;
545+
}
546+
547+
.chart-section-price {
548+
@apply text-xl md:text-2xl font-semibold;
549+
}
525550
}
526551

527552
/* Custom Scrollbar Styles */

0 commit comments

Comments
 (0)