Skip to content

Commit 0f519f5

Browse files
norugpullnorugpull
committed
feat: convert page UI
1 parent a04198e commit 0f519f5

File tree

2 files changed

+186
-6
lines changed

2 files changed

+186
-6
lines changed

‎apps/web-app/src/components/Convert/Convert.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import { Button } from '@/components/ui/button';
2+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3+
import { Checkbox } from '@/components/ui/checkbox';
4+
import { Input } from '@/components/ui/input';
5+
import { Label } from '@/components/ui/label';
6+
import {
7+
Select,
8+
SelectContent,
9+
SelectItem,
10+
SelectTrigger,
11+
SelectValue,
12+
} from '@/components/ui/select';
13+
import { Switch } from '@/components/ui/switch';
14+
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
15+
import { ArrowDownUp, Info, Settings } from 'lucide-react';
16+
import { useState } from 'react';
17+
import { Hero } from '../Hero/Hero';
18+
19+
export default function Convert() {
20+
const [fromAsset, setFromAsset] = useState('BTC');
21+
const [toAsset, setToAsset] = useState('BTC');
22+
const [amount, setAmount] = useState('');
23+
const [showChart, setShowChart] = useState(false);
24+
25+
const handleSwap = () => {
26+
setFromAsset(toAsset);
27+
setToAsset(fromAsset);
28+
};
29+
30+
return (
31+
<div className="min-h-screen bg-neutral-950 text-neutral-100 flex flex-col">
32+
<Hero title="Convert">
33+
Lorem bitcoinae dollar situs ametus, consensusium adipiscing elitum, sed
34+
do proofus-of-workium.
35+
</Hero>
36+
37+
<div className="grid grid-cols-12 gap-6 px-6 py-12">
38+
<div className="flex flex-col gap-6 col-span-12 lg:col-span-4 lg:col-start-5">
39+
<Card className="bg-neutral-900 border border-neutral-800 rounded-2xl shadow-lg">
40+
<CardHeader>
41+
<CardTitle className="text-xl font-semibold text-center">
42+
Convert
43+
</CardTitle>
44+
</CardHeader>
45+
46+
<CardContent className="space-y-6">
47+
<div className="flex items-center justify-between">
48+
<Tabs defaultValue="convert" className="flex-1">
49+
<TabsList className="flex bg-neutral-800 rounded-full p-1 w-full max-w-md mx-auto">
50+
<TabsTrigger
51+
value="convert"
52+
className="flex-1 rounded-full data-[state=active]:bg-neutral-700 data-[state=active]:text-[#FF6228] text-neutral-400"
53+
>
54+
Convert
55+
</TabsTrigger>
56+
<TabsTrigger
57+
value="cross"
58+
className="flex-1 rounded-full data-[state=active]:bg-neutral-700 data-[state=active]:text-[#FF6228] text-neutral-400"
59+
>
60+
Cross-chain convert
61+
</TabsTrigger>
62+
</TabsList>
63+
</Tabs>
64+
<Button
65+
variant="ghost"
66+
size="icon"
67+
className="ml-2 text-neutral-400 hover:text-white"
68+
>
69+
<Settings className="w-5 h-5" />
70+
</Button>
71+
</div>
72+
73+
<div className="space-y-6">
74+
<div className="p-4 bg-neutral-800 rounded-xl">
75+
<Label>From</Label>
76+
<div className="flex justify-between items-center mt-2">
77+
<div className="flex items-center gap-2">
78+
<Select value={fromAsset} onValueChange={setFromAsset}>
79+
<SelectTrigger className="w-28 bg-neutral-700 border-none">
80+
<SelectValue placeholder="Token" />
81+
</SelectTrigger>
82+
<SelectContent>
83+
<SelectItem value="BTC">BTC</SelectItem>
84+
<SelectItem value="ETH">ETH</SelectItem>
85+
<SelectItem value="USDT">USDT</SelectItem>
86+
</SelectContent>
87+
</Select>
88+
<span className="text-sm text-neutral-500">
89+
Balance -
90+
</span>
91+
</div>
92+
<Input
93+
type="number"
94+
value={amount}
95+
onChange={(e) => setAmount(e.target.value)}
96+
placeholder="0.012"
97+
className="w-24 bg-transparent border-none text-right text-lg font-medium focus-visible:ring-0"
98+
/>
99+
</div>
100+
</div>
101+
102+
<div className="flex justify-center">
103+
<Button variant="ghost" size="icon" onClick={handleSwap}>
104+
<ArrowDownUp className="h-5 w-5 text-neutral-400" />
105+
</Button>
106+
</div>
107+
108+
<div className="p-4 bg-neutral-800 rounded-xl">
109+
<Label>To</Label>
110+
<div className="flex justify-between items-center mt-2">
111+
<div className="flex items-center gap-2">
112+
<Select value={toAsset} onValueChange={setToAsset}>
113+
<SelectTrigger className="w-28 bg-neutral-700 border-none">
114+
<SelectValue placeholder="Token" />
115+
</SelectTrigger>
116+
<SelectContent>
117+
<SelectItem value="BTC">BTC</SelectItem>
118+
<SelectItem value="ETH">ETH</SelectItem>
119+
<SelectItem value="USDT">USDT</SelectItem>
120+
</SelectContent>
121+
</Select>
122+
<span className="text-sm text-neutral-500">
123+
Balance -
124+
</span>
125+
</div>
126+
<Input
127+
type="number"
128+
value="0.012"
129+
readOnly
130+
className="w-24 bg-transparent border-none text-right text-lg font-medium focus-visible:ring-0"
131+
/>
132+
</div>
133+
</div>
134+
135+
<div className="flex justify-end items-center gap-2">
136+
<Label htmlFor="chart" className="text-sm text-neutral-400">
137+
Show chart
138+
</Label>
139+
<Switch
140+
checked={showChart}
141+
id="chart"
142+
onCheckedChange={setShowChart}
143+
/>
144+
</div>
145+
</CardContent>
146+
</div>
147+
</Card>
148+
<div className="rounded-xl border border-neutral-800 bg-neutral-900 p-4 space-y-2 text-sm text-neutral-400">
149+
<div className="flex justify-between">
150+
<span>You’ll receive</span>
151+
<span className="text-neutral-100">0.004 XYZ</span>
152+
</div>
153+
<div className="flex justify-between items-center">
154+
<span className="flex items-center gap-1">
155+
Estimated network fee <Info className="w-3 h-3" />
156+
</span>
157+
<span className="text-neutral-100">0.004 XYZ</span>
158+
</div>
159+
<div className="flex justify-between">
160+
<span>Transaction fee</span>
161+
<span className="text-neutral-100">0.004 XYZ</span>
162+
</div>
163+
</div>
164+
165+
<div className="space-y-1">
166+
<div className="flex items-center gap-2">
167+
<Checkbox id="terms" />
168+
<Label htmlFor="terms" className="text-sm">
169+
Accept terms and condition
170+
</Label>
171+
</div>
172+
<p className="text-xs text-neutral-500">
173+
You agree to our Terms of Service and Privacy Policy.
174+
</p>
175+
</div>
176+
177+
<Button className="w-full bg-orange-500 hover:bg-orange-600 text-white text-base font-medium py-6 rounded-xl">
178+
Convert
179+
</Button>
180+
</div>
181+
</div>
182+
</div>
183+
);
184+
}

‎apps/web-app/src/routes/convert.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Hero } from '@/components/Hero/Hero';
1+
import Convert from '@/components/Convert/Convert';
22
import { createFileRoute } from '@tanstack/react-router';
33

44
export const Route = createFileRoute('/convert')({
@@ -8,11 +8,7 @@ export const Route = createFileRoute('/convert')({
88
function RouteComponent() {
99
return (
1010
<div className="container mx-auto my-8 px-4">
11-
<Hero title="Convert">
12-
Lorem bitcoinae dollar situs ametus, consensusium adipiscing elitum, sed
13-
do proofus-of-workium.
14-
</Hero>
15-
Hello "/convert"!
11+
<Convert />
1612
</div>
1713
);
1814
}

0 commit comments

Comments
 (0)