-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathConverter.tsx
More file actions
83 lines (77 loc) · 2.41 KB
/
Copy pathConverter.tsx
File metadata and controls
83 lines (77 loc) · 2.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
'use client';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import Image from 'next/image';
import { useState } from 'react';
import { Input } from './ui/input';
import { formatPrice } from '@/lib/utils';
export const Converter = ({ symbol, icon, priceList }: ConverterProps) => {
const [currency, setCurrency] = useState('usd');
const [amount, setAmount] = useState('10');
// Calculate converted price
const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0);
return (
<div className='converter-container'>
<div className='converter-input-wrapper'>
<Input
type='number'
placeholder='Amount'
value={amount}
onChange={(e) => setAmount(e.target.value)}
className='converter-input'
/>
<div className='converter-coin-info'>
<Image src={icon} alt={symbol} width={20} height={20} />
<p className='converter-coin-symbol'>
{symbol.toUpperCase()}
</p>
</div>
</div>
<div>
<div className='converter-divider-wrapper'>
<div className='converter-divider-line' />
<Image
src='/assets/converter.svg'
alt='converter'
width={32}
height={32}
className='converter-icon'
/>
</div>
</div>
<div className='converter-output-wrapper'>
<p className='text-base font-medium'>
{formatPrice(convertedPrice, 2, currency, false)}
</p>
<Select value={currency} onValueChange={setCurrency}>
<SelectTrigger
className='converter-select-trigger'
value={currency}
>
<SelectValue placeholder='Select' className='flex gap-2'>
<span className='converter-currency'>
{currency.toUpperCase()}
</span>
</SelectValue>
</SelectTrigger>
<SelectContent className='converter-select-content'>
{Object.keys(priceList).map((currencyCode) => (
<SelectItem
key={currencyCode}
value={currencyCode}
className='converter-select-item'
>
{currencyCode.toUpperCase()}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
);
};