Skip to content

Commit 0807ea4

Browse files
nikkyeyanikkyeya
committed
fix
1 parent de21763 commit 0807ea4

16 files changed

+326
-366
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
2323
const coinOHLCData = await getCoinOHLC(id, 30, 'usd', 'hourly', 'full');
2424
const pool = await fetchPools(id);
2525

26-
console.log('pool Data:', pool);
27-
2826
const coin = {
2927
id: coinData.id,
3028
name: coinData.name,

‎app/globals.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,71 @@
187187
.candlestick-chart-container {
188188
@apply w-full min-h-[200px];
189189
}
190+
191+
/* Home Page Utilities */
192+
.section-title {
193+
@apply text-xl md:text-2xl;
194+
}
195+
196+
.card-grid {
197+
@apply w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6;
198+
}
199+
200+
.table-header-cell {
201+
@apply text-purple-100;
202+
}
203+
204+
.table-row-hover {
205+
@apply overflow-hidden border-none hover:!bg-dark-400 rounded-lg;
206+
}
207+
208+
.coin-link {
209+
@apply pl-1 md:pl-2 py-1 md:py-2 xl:py-1 flex items-center gap-2 md:gap-3;
210+
}
211+
212+
.coin-image {
213+
@apply rounded-full w-8 h-8 md:w-9 md:h-9;
214+
}
215+
216+
.price-change-indicator {
217+
@apply flex gap-1 items-center text-sm font-medium;
218+
}
219+
220+
.top-movers-container {
221+
@apply w-full flex flex-col justify-center h-full py-4 bg-dark-500 rounded-xl;
222+
}
223+
224+
.main-container {
225+
@apply py-6 md:py-12 mx-auto px-4 sm:px-6 max-w-[1440px] w-full space-y-6 md:space-y-6;
226+
}
227+
228+
.home-grid {
229+
@apply grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-start lg:items-center gap-6;
230+
}
231+
232+
.section-title-spacing {
233+
@apply text-xl md:text-2xl px-4 md:px-5 mb-2;
234+
}
235+
236+
.table-scrollbar-container {
237+
@apply bg-dark-500 overflow-hidden;
238+
}
239+
240+
.table-head-left {
241+
@apply pl-4 md:pl-5 py-3 text-purple-100;
242+
}
243+
244+
.table-head-right {
245+
@apply pr-4 md:pr-5 text-purple-100;
246+
}
247+
248+
.table-cell-change {
249+
@apply font-medium py-4 pr-3 md:pr-5;
250+
}
251+
252+
.table-cell-price {
253+
@apply font-bold pr-5 text-sm max-w-[100%] truncate;
254+
}
190255
}
191256

192257
/* Custom Scrollbar Styles */

‎app/layout.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export default async function RootLayout({
2525
children: React.ReactNode;
2626
}>) {
2727
const trendingCoins = await getTrendingCoins();
28-
// const trendingCoins = await searchCoins('');
2928

3029
return (
3130
<html lang='en' className='dark'>

‎app/page.tsx‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ const Home = async () => {
3434
);
3535

3636
return (
37-
<main className='py-6 md:py-12 container size-full space-y-6 md:space-y-6'>
38-
<section className='grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-start lg:items-center gap-6'>
37+
<main className='main-container'>
38+
<section className='home-grid'>
3939
{/* Coin Overview */}
4040
<ChartSection
4141
coinData={coinData}
@@ -44,21 +44,17 @@ const Home = async () => {
4444
/>
4545

4646
{/* Top Movers */}
47-
<div className='w-full flex flex-col justify-center h-full py-4 bg-dark-500 rounded-xl'>
48-
<h4 className='text-xl md:text-2xl px-4 md:px-5 mb-2'>Top Movers</h4>
49-
<div className='bg-dark-500 custom-scrollbar overflow-hidden'>
47+
<div className='top-movers-container'>
48+
<h4 className='section-title-spacing'>Top Movers</h4>
49+
<div className='table-scrollbar-container custom-scrollbar'>
5050
<Table>
51-
<TableHeader className='text-purple-100'>
51+
<TableHeader className='table-header-cell'>
5252
<TableRow className='hover:bg-transparent'>
53-
<TableHead className='pl-4 md:pl-5 py-3 text-purple-100'>
54-
Name
55-
</TableHead>
56-
<TableHead className='text-purple-100 table-cell'>
53+
<TableHead className='table-head-left'>Name</TableHead>
54+
<TableHead className='table-header-cell table-cell'>
5755
24h Change
5856
</TableHead>
59-
<TableHead className='pr-4 md:pr-5 text-purple-100'>
60-
Price
61-
</TableHead>
57+
<TableHead className='table-head-right'>Price</TableHead>
6258
</TableRow>
6359
</TableHeader>
6460
<TableBody>
@@ -70,21 +66,18 @@ const Home = async () => {
7066
item.data.price_change_percentage_24h.usd > 0;
7167

7268
return (
73-
<TableRow
74-
key={index}
75-
className='overflow-hidden border-none hover:!bg-dark-400 rounded-lg'
76-
>
69+
<TableRow key={index} className='table-row-hover'>
7770
<TableCell className='font-bold'>
7871
<Link
7972
href={`/coins/${item.id}`}
80-
className='pl-1 md:pl-2 py-1 md:py-2 xl:py-1 flex items-center gap-2 md:gap-3'
73+
className='coin-link'
8174
>
8275
<Image
8376
src={item.large}
8477
alt={item.name}
8578
width={36}
8679
height={36}
87-
className='rounded-full w-8 h-8 md:w-9 md:h-9'
80+
className='coin-image'
8881
/>
8982
<div>
9083
<p className='text-sm md:text-base'>
@@ -93,10 +86,10 @@ const Home = async () => {
9386
</div>
9487
</Link>
9588
</TableCell>
96-
<TableCell className='font-medium py-4 pr-3 md:pr-5 table-cell'>
89+
<TableCell className='table-cell-change'>
9790
<div
9891
className={cn(
99-
'flex gap-1 items-center text-sm font-medium',
92+
'price-change-indicator',
10093
isTrendingUp ? 'text-green-500' : 'text-red-500'
10194
)}
10295
>
@@ -112,7 +105,7 @@ const Home = async () => {
112105
)}
113106
</div>
114107
</TableCell>
115-
<TableCell className='font-bold pr-5 text-sm max-w-[100%] truncate'>
108+
<TableCell className='table-cell-price'>
116109
{formatPrice(item.data.price)}
117110
</TableCell>
118111
</TableRow>
@@ -124,9 +117,10 @@ const Home = async () => {
124117
</div>
125118
</section>
126119

120+
{/* Top Gainers / Losers */}
127121
<section className='space-y-6 mt-5'>
128-
<h4 className='text-xl md:text-2xl'>Top Gainers</h4>
129-
<div className='w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6'>
122+
<h4 className='section-title'>Top Gainers</h4>
123+
<div className='card-grid'>
130124
{topGainersLosers.top_gainers.map(
131125
(coin: TopGainersLosersResponse) => (
132126
<CoinCard
@@ -144,9 +138,10 @@ const Home = async () => {
144138
)}
145139
</div>
146140
</section>
141+
147142
<section className='space-y-6 mt-8'>
148-
<h4 className='text-xl md:text-2xl'>Top Losers</h4>
149-
<div className='w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6'>
143+
<h4 className='section-title'>Top Losers</h4>
144+
<div className='card-grid'>
150145
{topGainersLosers.top_losers.map((coin: TopGainersLosersResponse) => (
151146
<CoinCard
152147
key={coin.id}

‎components/CandlestickChart.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ export default function CandlestickChart({
120120
useEffect(() => {
121121
if (candleSeriesRef.current && chartRef.current && chartData.length > 0) {
122122
// For both modes, use setData() to update the chart
123-
// The lightweight-charts library will handle smooth updates automatically
124123
candleSeriesRef.current.setData(chartData);
125124
chartRef.current.timeScale().fitContent();
126125

@@ -136,7 +135,6 @@ export default function CandlestickChart({
136135

137136
return (
138137
<div className='candlestick-container'>
139-
{/* Chart Header */}
140138
<div className='candlestick-header'>
141139
<div className='flex-1'>{children}</div>
142140
{/* Only show period buttons in historical mode */}

‎components/ClickableTableRow.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,16 @@
22

33
import { useRouter } from 'next/navigation';
44
import { TableRow } from '@/components/ui/table';
5-
import { ReactNode } from 'react';
65

7-
interface ClickableTableRowProps {
8-
href: string;
9-
children: ReactNode;
10-
className?: string;
11-
}
12-
13-
export function ClickableTableRow({ href, children, className }: ClickableTableRowProps) {
6+
export function ClickableTableRow({
7+
href,
8+
children,
9+
className,
10+
}: ClickableTableRowProps) {
1411
const router = useRouter();
1512

1613
return (
17-
<TableRow
18-
className={className}
19-
onClick={() => router.push(href)}
20-
>
14+
<TableRow className={className} onClick={() => router.push(href)}>
2115
{children}
2216
</TableRow>
2317
);

‎components/CoinHeader.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
'use client';
22

3-
import { useCoinPrice } from '@/hooks/useCoinPrice';
43
import { cn, formatPercentage, formatPrice } from '@/lib/utils';
54
import { TrendingDown, TrendingUp } from 'lucide-react';
65
import Image from 'next/image';
76
import { Badge } from './ui/badge';
87

9-
interface LiveCoinHeaderProps {
10-
name: string;
11-
image: string;
12-
livePrice?: number;
13-
livePriceChangePercentage24h: number;
14-
priceChangePercentage30d: number;
15-
priceChange24h: number;
16-
}
17-
188
export default function CoinHeader({
199
livePriceChangePercentage24h,
2010
priceChangePercentage30d,

‎components/Converter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { formatPrice } from '@/lib/utils';
1414

1515
export const Converter = ({ symbol, icon, priceList }: ConverterProps) => {
1616
const [currency, setCurrency] = useState('usd');
17-
const [amount, setAmount] = useState('1');
17+
const [amount, setAmount] = useState('10');
1818

1919
// Calculate converted price
2020
const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0);
@@ -65,7 +65,7 @@ export const Converter = ({ symbol, icon, priceList }: ConverterProps) => {
6565
</span>
6666
</SelectValue>
6767
</SelectTrigger>
68-
<SelectContent className='bg-dark-400'>
68+
<SelectContent className='bg-dark-400 max-h-[500px]'>
6969
{Object.keys(priceList).map((currencyCode) => (
7070
<SelectItem
7171
key={currencyCode}

0 commit comments

Comments
 (0)