Skip to content

Commit d224fbd

Browse files
nikkyeyanikkyeya
committed
fix
1 parent fddc518 commit d224fbd

5 files changed

Lines changed: 103 additions & 51 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
148148
<Separator className='my-8 bg-purple-600' />
149149

150150
{/* Coin Details */}
151-
<div className='w-full grid sm:grid-cols-3 gap-3 sm:gap-5'>
151+
<div className='w-full grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-5'>
152152
<div className='text-base bg-dark-500 p-4 rounded-lg flex flex-col gap-1'>
153153
<p className='text-purple-100'>Market Cap</p>
154154
<p className='text-base font-medium'>

‎app/layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
22
import { Geist, Geist_Mono } from 'next/font/google';
33
import './globals.css';
44
import { Header } from '@/components/Header';
5-
import { getTrendingCoins } from '@/lib/ coingecko.actions';
5+
import { getTrendingCoins, searchCoins } from '@/lib/ coingecko.actions';
66

77
const geistSans = Geist({
88
variable: '--font-geist-sans',
@@ -25,6 +25,7 @@ export default async function RootLayout({
2525
children: React.ReactNode;
2626
}>) {
2727
const trendingCoins = await getTrendingCoins();
28+
// const trendingCoins = await searchCoins('');
2829

2930
return (
3031
<html lang='en' className='dark'>

‎components/SearchModal.tsx‎

Lines changed: 90 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Button } from './ui/button';
1515
import { searchCoins } from '@/lib/ coingecko.actions';
1616
import { Search as SearchIcon, TrendingUp } from 'lucide-react';
1717
import { useEffect, useState } from 'react';
18-
import { formatPrice } from '@/lib/utils';
18+
import { cn, formatPercentage, formatPrice } from '@/lib/utils';
1919

2020
export const SearchModal = ({
2121
initialTrendingCoins = [],
@@ -85,7 +85,7 @@ export const SearchModal = ({
8585
<CommandDialog
8686
open={open}
8787
onOpenChange={setOpen}
88-
className='!bg-dark-400 !max-w-2xl'
88+
className='!bg-dark-400 max-w-sm sm:max-w-md md:max-w-2xl mx-auto'
8989
>
9090
<div className='bg-dark-500'>
9191
<CommandInput
@@ -120,26 +120,43 @@ export const SearchModal = ({
120120
key={coin.id}
121121
value={coin.id}
122122
onSelect={() => handleSelect(coin.id)}
123-
className='grid grid-cols-[auto_1fr_auto] gap-4 items-center data-[selected=true]:bg-dark-400 transition-all cursor-pointer hover:!bg-dark-400/50 py-3'
123+
className='grid grid-cols-4 gap-4 items-center data-[selected=true]:bg-dark-400 transition-all cursor-pointer hover:!bg-dark-400/50 py-3'
124124
>
125-
<Image
126-
src={coin.thumb}
127-
alt={coin.name}
128-
width={32}
129-
height={32}
130-
className='rounded-full'
131-
/>
132-
<div className='flex flex-col'>
133-
<p className='font-bold'>{coin.name}</p>
134-
<p className='text-sm text-purple-100 uppercase'>
135-
{coin.symbol}
136-
</p>
125+
<div className='flex gap-2 items-center col-span-2'>
126+
<Image
127+
src={coin.thumb}
128+
alt={coin.name}
129+
width={32}
130+
height={32}
131+
className='size-9 rounded-full'
132+
/>
133+
<div className='flex flex-col'>
134+
<p className='font-bold'>{coin.name}</p>
135+
<p className='text-sm text-purple-100 uppercase'>
136+
{coin.symbol}
137+
</p>
138+
</div>
137139
</div>
138-
{coin.data?.price && (
139-
<span className='font-semibold text-green-500'>
140-
{formatPrice(coin.data.price)}
141-
</span>
142-
)}
140+
141+
<span className='font-semibold text-sm lg:text-base'>
142+
{formatPrice(coin.data.price)}
143+
</span>
144+
145+
<p
146+
className={cn(
147+
'flex gap-1 text-sm lg:text-base items-center font-medium',
148+
{
149+
'text-green-500':
150+
coin.data.price_change_percentage_24h.usd > 0,
151+
'text-red-500':
152+
coin.data.price_change_percentage_24h.usd < 0,
153+
}
154+
)}
155+
>
156+
{formatPercentage(
157+
coin.data.price_change_percentage_24h.usd
158+
)}
159+
</p>
143160
</CommandItem>
144161
);
145162
})}
@@ -152,34 +169,60 @@ export const SearchModal = ({
152169
) : searchResults.length === 0 ? (
153170
<CommandEmpty>No coins found.</CommandEmpty>
154171
) : (
155-
<CommandGroup heading='Search Results' className='bg-dark-500'>
156-
{searchResults.slice(0, 10).map((coin) => (
157-
<CommandItem
158-
key={coin.id}
159-
value={coin.id}
160-
onSelect={() => handleSelect(coin.id)}
161-
className='grid grid-cols-[auto_1fr_auto] gap-4 items-center data-[selected=true]:bg-dark-400 transition-all cursor-pointer hover:!bg-dark-400/50 py-3'
162-
>
163-
<Image
164-
src={coin.thumb}
165-
alt={coin.name}
166-
width={32}
167-
height={32}
168-
className='rounded-full'
169-
/>
170-
<div className='flex flex-col'>
171-
<p className='font-semibold'>{coin.name}</p>
172-
<p className='text-sm text-purple-100 uppercase'>
173-
{coin.symbol}
172+
<CommandGroup
173+
heading={
174+
<p className='flex items-center gap-2 text-purple-100'>
175+
Search Results
176+
</p>
177+
}
178+
className='bg-dark-500 text-purple-100'
179+
>
180+
{searchResults.slice(0, 10).map((coin) => {
181+
return (
182+
<CommandItem
183+
key={coin.id}
184+
value={coin.id}
185+
onSelect={() => handleSelect(coin.id)}
186+
className='grid grid-cols-4 gap-4 items-center data-[selected=true]:bg-dark-400 transition-all cursor-pointer hover:!bg-dark-400/50 py-3'
187+
>
188+
<div className='flex gap-2 items-center col-span-2'>
189+
<Image
190+
src={coin.thumb}
191+
alt={coin.name}
192+
width={32}
193+
height={32}
194+
className='size-9 rounded-full'
195+
/>
196+
<div className='flex flex-col'>
197+
<p className='font-bold'>{coin.name}</p>
198+
<p className='text-sm text-purple-100 uppercase'>
199+
{coin.symbol}
200+
</p>
201+
</div>
202+
</div>
203+
204+
{coin.data?.price && (
205+
<span className='font-semibold text-sm lg:text-base'>
206+
{formatPrice(coin.data.price)}
207+
</span>
208+
)}
209+
210+
<p
211+
className={cn(
212+
'flex gap-1 text-sm lg:text-base items-center font-medium',
213+
{
214+
'text-green-500':
215+
coin.data?.price_change_percentage_24h > 0,
216+
'text-red-500':
217+
coin.data?.price_change_percentage_24h < 0,
218+
}
219+
)}
220+
>
221+
{formatPercentage(coin.data?.price_change_percentage_24h)}
174222
</p>
175-
</div>
176-
{coin.data?.price && (
177-
<span className='font-semibold text-green-500'>
178-
{formatPrice(coin.data.price)}
179-
</span>
180-
)}
181-
</CommandItem>
182-
))}
223+
</CommandItem>
224+
);
225+
})}
183226
</CommandGroup>
184227
)}
185228
</CommandList>

‎lib/ coingecko.actions.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,15 @@ export async function searchCoins(query: string): Promise<SearchCoin[]> {
117117
if (priceRes.ok) {
118118
const priceData = await priceRes.json();
119119

120+
console.log('===priceData', priceData);
121+
120122
// Create a map of coin prices
121123
const priceMap = new Map<string, { price: number }>(
122124
priceData.map((coin: CoinMarketData) => [
123125
coin.id,
124-
{ price: coin.current_price }
126+
{ price: coin.current_price,
127+
price_change_percentage_24h: coin.price_change_percentage_24h
128+
}
125129
])
126130
);
127131

‎types.d.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ interface TrendingCoin {
7373
large: string;
7474
data: {
7575
price: number;
76+
price_change_percentage_24h: {
77+
usd: number
78+
};
7679
};
7780
};
7881
}
@@ -84,8 +87,9 @@ interface SearchCoin {
8487
market_cap_rank: number | null;
8588
thumb: string;
8689
large: string;
87-
data?: {
90+
data: {
8891
price?: number;
92+
price_change_percentage_24h: number;
8993
};
9094
}
9195

0 commit comments

Comments
 (0)