Skip to content

Commit 2f97edb

Browse files
nikkyeyanikkyeya
committed
fix responsive
1 parent 42ef947 commit 2f97edb

4 files changed

Lines changed: 106 additions & 82 deletions

File tree

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,15 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
5454
<div className='space-y-5 w-full'>
5555
<h3 className='text-3xl font-medium'>{coin.name}</h3>
5656
<div className='flex gap-3 items-center'>
57-
<Image src={coin.image} alt={coin.name} width={77} height={77} />
57+
<Image
58+
src={coin.image}
59+
alt={coin.name}
60+
width={77}
61+
height={77}
62+
className='size-[45px] sm:size-[50px] xl:size-[77px]'
63+
/>
5864
<div className='flex gap-4'>
59-
<h1 className='text-6xl font-semibold'>
65+
<h1 className='text-3xl sm:text-5xl xl:text-6xl font-semibold'>
6066
{formatPrice(coin.price)}
6167
</h1>
6268
<Badge
@@ -73,15 +79,18 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
7379
</Badge>
7480
</div>
7581
</div>
76-
<div className='grid grid-cols-3 mt-8 gap-6 w-fit'>
82+
<div className='grid grid-cols-3 mt-8 gap-4 sm:gap-6 w-fit'>
7783
{/* Today */}
7884
<div className='text-base border-r border-purple-600 flex flex-col gap-2'>
79-
<p className='text-purple-100'>Today</p>
85+
<p className='text-purple-100 max-sm:text-sm'>Today</p>
8086
<div
81-
className={cn('flex gap-1 items-center text-sm font-medium', {
82-
'text-green-500': coin.priceChangePercentage24h > 0,
83-
'text-red-500': coin.priceChangePercentage24h < 0,
84-
})}
87+
className={cn(
88+
'flex flex-1 gap-1 items-end text-sm font-medium',
89+
{
90+
'text-green-500': coin.priceChangePercentage24h > 0,
91+
'text-red-500': coin.priceChangePercentage24h < 0,
92+
}
93+
)}
8594
>
8695
<p>{formatPercentage(coin.priceChangePercentage24h)}</p>
8796
{isTrendingUp ? (
@@ -93,12 +102,15 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
93102
</div>
94103
{/* 30 Days */}
95104
<div className='text-base border-r border-purple-600 flex flex-col gap-2'>
96-
<p className='text-purple-100'>30 Days</p>
105+
<p className='text-purple-100 max-sm:text-sm'>30 Days</p>
97106
<div
98-
className={cn('flex gap-1 items-center text-sm font-medium', {
99-
'text-green-500': coin.priceChangePercentage30d > 0,
100-
'text-red-500': coin.priceChangePercentage30d < 0,
101-
})}
107+
className={cn(
108+
'flex gap-1 flex-1 items-end text-sm font-medium',
109+
{
110+
'text-green-500': coin.priceChangePercentage30d > 0,
111+
'text-red-500': coin.priceChangePercentage30d < 0,
112+
}
113+
)}
102114
>
103115
<p>{formatPercentage(coin.priceChangePercentage30d)}</p>
104116
{isTrendingUp ? (
@@ -110,7 +122,9 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
110122
</div>
111123
{/* Rank */}
112124
<div className='text-base flex flex-col gap-2'>
113-
<p className='text-purple-100 '>Price Change (24h)</p>
125+
<p className='text-purple-100 max-sm:text-sm'>
126+
Price Change (24h)
127+
</p>
114128
<p
115129
className={cn('flex gap-1 items-center text-sm font-medium', {
116130
'text-green-500': coin.priceChange24h > 0,
@@ -134,9 +148,9 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
134148
<Separator className='my-8 bg-purple-600' />
135149

136150
{/* Coin Details */}
137-
<div className='w-full grid grid-cols-3 gap-5'>
151+
<div className='w-full grid sm:grid-cols-3 gap-3 sm:gap-5'>
138152
<div className='text-base bg-dark-500 p-4 rounded-lg flex flex-col gap-1'>
139-
<p className='text-purple-100 '>Market Cap</p>
153+
<p className='text-purple-100'>Market Cap</p>
140154
<p className='text-base font-medium'>
141155
{formatPrice(coin.marketCap)}
142156
</p>

‎app/coins/page.tsx‎

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Coins = async ({
1919
}) => {
2020
const params = await searchParams;
2121
const currentPage = Number(params.page) || 1;
22-
const perPage = 8;
22+
const perPage = 10;
2323

2424
const coinsData = await getCoinList(currentPage, perPage);
2525

@@ -34,65 +34,73 @@ const Coins = async ({
3434

3535
return (
3636
<main className='py-12 container size-full items-center gap-10 justify-center'>
37-
<div className='flex flex-col w-full space-y-4'>
37+
<div className='flex flex-col w-full space-y-5'>
3838
<h4 className='text-2xl'>All Coins</h4>
39-
<Table className='bg-dark-500 rounded-lg overflow-hidden'>
40-
<TableHeader className='bg-dark-400 text-purple-100'>
41-
<TableRow className='hover:bg-transparent !border-purple-600 '>
42-
<TableHead className='pl-5 py-4 text-purple-100'>Rank</TableHead>
43-
<TableHead className='text-purple-100'>Token</TableHead>
44-
<TableHead className='text-purple-100'>Price</TableHead>
45-
<TableHead className='pr-8 text-purple-100'>24h Change</TableHead>
46-
<TableHead className='pr-8 text-purple-100'>Market Cap</TableHead>
47-
</TableRow>
48-
</TableHeader>
49-
<TableBody>
50-
{coinsData.map((coin: CoinMarketData) => {
51-
const isTrendingUp = coin.price_change_percentage_24h > 0;
52-
return (
53-
<ClickableTableRow
54-
key={coin.id}
55-
href={`/coins/${coin.id}`}
56-
className='text-lg hover:!bg-dark-400/30 !border-purple-600 cursor-pointer'
57-
>
58-
<TableCell className='pl-5 !max-w-[80px] py-5 font-medium text-purple-100'>
59-
#{coin.market_cap_rank}
60-
</TableCell>
61-
<TableCell className='py-3 font-semibold'>
62-
<div className='flex items-center gap-3'>
63-
<Image
64-
src={coin.image}
65-
alt={coin.name}
66-
width={36}
67-
height={36}
68-
/>
69-
<p>
70-
{coin.name} ({coin.symbol.toUpperCase()})
71-
</p>
72-
</div>
73-
</TableCell>
74-
<TableCell className='py-4 font-medium'>
75-
{formatPrice(coin.current_price)}
76-
</TableCell>
77-
<TableCell className='font-medium'>
78-
<span
79-
className={cn('flex gap-1 items-center font-medium', {
80-
'text-green-600': isTrendingUp,
81-
'text-red-500': !isTrendingUp,
82-
})}
83-
>
84-
{isTrendingUp && '+'}
85-
{formatPercentage(coin.price_change_percentage_24h)}
86-
</span>
87-
</TableCell>
88-
<TableCell className='pr-5 font-medium'>
89-
{formatPrice(coin.market_cap)}
90-
</TableCell>
91-
</ClickableTableRow>
92-
);
93-
})}
94-
</TableBody>
95-
</Table>
39+
<div className='bg-dark-500 rounded-xl custom-scrollbar max-h-fit overflow-hidden'>
40+
<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>
46+
<TableHead className='text-purple-100'>Token</TableHead>
47+
<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>
54+
</TableRow>
55+
</TableHeader>
56+
<TableBody>
57+
{coinsData.map((coin: CoinMarketData) => {
58+
const isTrendingUp = coin.price_change_percentage_24h > 0;
59+
return (
60+
<ClickableTableRow
61+
key={coin.id}
62+
href={`/coins/${coin.id}`}
63+
className='text-lg hover:!bg-dark-400/30 !border-purple-600 cursor-pointer'
64+
>
65+
<TableCell className='pl-5 !max-w-[80px] py-5 font-medium text-purple-100'>
66+
#{coin.market_cap_rank}
67+
</TableCell>
68+
<TableCell className='py-3 font-semibold'>
69+
<div className='flex items-center gap-3'>
70+
<Image
71+
src={coin.image}
72+
alt={coin.name}
73+
width={36}
74+
height={36}
75+
/>
76+
<p>
77+
{coin.name} ({coin.symbol.toUpperCase()})
78+
</p>
79+
</div>
80+
</TableCell>
81+
<TableCell className='py-4 font-medium'>
82+
{formatPrice(coin.current_price)}
83+
</TableCell>
84+
<TableCell className='font-medium'>
85+
<span
86+
className={cn('flex gap-1 items-center font-medium', {
87+
'text-green-600': isTrendingUp,
88+
'text-red-500': !isTrendingUp,
89+
})}
90+
>
91+
{isTrendingUp && '+'}
92+
{formatPercentage(coin.price_change_percentage_24h)}
93+
</span>
94+
</TableCell>
95+
<TableCell className='pr-5 font-medium'>
96+
{formatPrice(coin.market_cap)}
97+
</TableCell>
98+
</ClickableTableRow>
99+
);
100+
})}
101+
</TableBody>
102+
</Table>
103+
</div>
96104

97105
<CoinsPagination
98106
currentPage={currentPage}

‎app/globals.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,6 @@
210210

211211
/* Table Custom Scrollbar */
212212
.custom-scrollbar [data-slot='table-container'] {
213-
max-height: 600px;
214213
overflow-y: auto;
215214
}
216215

‎app/page.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ const Home = async () => {
3232
'full' // precision
3333
);
3434

35+
console.log('trendingCoins:', trendingCoins);
36+
3537
return (
3638
<main className='py-6 md:py-12 container size-full space-y-6 md:space-y-6'>
3739
<section className='grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-start lg:items-center gap-6 xl:gap-10'>
@@ -61,7 +63,7 @@ const Home = async () => {
6163
{/* Top Movers */}
6264
<div className='w-full flex flex-col justify-center h-full py-4 bg-dark-500 rounded-xl'>
6365
<h4 className='text-xl md:text-2xl px-4 md:px-5 mb-2'>Top Movers</h4>
64-
<div className='overflow-x-auto'>
66+
<div className='bg-dark-500 rounded-xl custom-scrollbar overflow-hidden'>
6567
<Table>
6668
<TableHeader className='text-purple-100'>
6769
<TableRow className='hover:bg-transparent'>
@@ -105,9 +107,6 @@ const Home = async () => {
105107
<p className='text-sm md:text-base'>
106108
{item.name}
107109
</p>
108-
<p className='text-purple-100 font-medium text-xs sm:hidden'>
109-
{formatPercentage(item.data.price)}
110-
</p>
111110
</div>
112111
</Link>
113112
</TableCell>
@@ -118,15 +117,19 @@ const Home = async () => {
118117
isTrendingUp ? 'text-green-500' : 'text-red-500'
119118
)}
120119
>
121-
<p>{formatPercentage(item.data.price)}</p>
120+
<p>
121+
{formatPercentage(
122+
item.data.price_change_percentage_24h.usd
123+
)}
124+
</p>
122125
{isTrendingUp ? (
123126
<TrendingUp width={16} height={16} />
124127
) : (
125128
<TrendingDown width={16} height={16} />
126129
)}
127130
</div>
128131
</TableCell>
129-
<TableCell className='font-bold pr-2 md:pr-2 text-sm md:text-base'>
132+
<TableCell className='font-bold pr-5 text-sm max-w-[100px] truncate'>
130133
{formatPrice(item.data.price)}
131134
</TableCell>
132135
</TableRow>

0 commit comments

Comments
 (0)