Skip to content

Commit 7706757

Browse files
Rupesh-2003Rupesh-2003
committed
Dashboard borrow UI
1 parent d54f5d4 commit 7706757

File tree

6 files changed

+156
-1
lines changed

6 files changed

+156
-1
lines changed

‎public/assets/matic.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎public/assets/usdc.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/Borrow/Borrow.jsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const Borrow = () => {
2+
return (
3+
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
4+
<div className="flex flex-row items-center">
5+
<div className="font-inter text-[16px] font-medium">
6+
Loan amount:
7+
</div>
8+
9+
<input className="ml-auto bg-transparent text-right text-[#696c80] font-medium outline-none" placeholder="0.00" />
10+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[40px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[25px] bg-[#404557]">
11+
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
12+
USDC
13+
</div>
14+
</div>
15+
16+
<div className="flex flex-row items-center">
17+
18+
<div className="font-inter text-[16px] font-medium">Expected repay duration:</div>
19+
<input className="ml-auto bg-transparent text-right text-[#696c80] font-medium mr-[10px] outline-none" placeholder="0" />
20+
<div>days</div>
21+
22+
</div>
23+
24+
<div className="flex flex-row items-center">
25+
26+
<div className="font-inter text-[16px] font-medium">Interest %:</div>
27+
<div className="ml-auto bg-transparent text-right text-[#696c80] font-medium mr-[10px] outline-none">13%</div>
28+
<div>APR</div>
29+
30+
</div>
31+
32+
<div className="flex flex-row items-center">
33+
34+
<div className="font-inter text-[16px] font-medium">Interest Amount:</div>
35+
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
36+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[40px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
37+
{/* <div className="flex justify-center w-[30px] h-[30px] rounded-full bg-white p-[4px] box-border"> */}
38+
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
39+
{/* </div> */}
40+
USDC
41+
</div>
42+
43+
</div>
44+
45+
<div className="flex flex-row items-center">
46+
47+
<div className="font-inter text-[16px] font-medium">Required collateral:</div>
48+
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
49+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[40px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
50+
<div className="flex justify-center w-[30px] h-[30px] rounded-full bg-white p-[4px] box-border">
51+
<img src="./assets/matic.svg" alt="maticLogo"/>
52+
</div>
53+
MATIC
54+
</div>
55+
</div>
56+
57+
<button
58+
type="submit"
59+
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
60+
>
61+
Confirm Borrow
62+
</button>
63+
64+
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
65+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-[15px] h-[15px]">
66+
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
67+
</svg>
68+
on conforming collateral amount will be deducted from your account</div>
69+
</div>
70+
)
71+
}
72+
73+
export default Borrow

‎src/components/DashRight/DashRight.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useState } from "react"
2+
import Borrow from "../Borrow/Borrow"
3+
import Lend from "../Lend/Lend"
4+
5+
const DashRight = () => {
6+
const [state, setState] = useState('borrow')
7+
8+
return (
9+
<div className="bg-[#12131A] w-[100%] h-[100%]">
10+
<div className="flex flex-row gap-x-[10px] w-[200px] self-center bg-[#1C1E29] p-[5px] m-auto mb-[50px] rounded-md cursor-pointer">
11+
<div className={`w-[100px] rounded-md text-center ${state == 'borrow' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
12+
onClick={() => {setState('borrow')}}
13+
>
14+
Borrow
15+
</div>
16+
<div className={`w-[100px] rounded-md text-center ${state == 'lend' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
17+
onClick={() => {setState('lend')}}
18+
>
19+
Lend
20+
</div>
21+
</div>
22+
<div className="bg-[#1C1E29] w-[100%] h-auto rounded-xl">
23+
{
24+
state == 'borrow' ?
25+
<Borrow/>
26+
:
27+
<Lend/>
28+
}
29+
</div>
30+
</div>
31+
)
32+
}
33+
34+
export default DashRight

‎src/components/Lend/Lend.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const Lend = () => {
2+
return (
3+
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
4+
5+
<button
6+
type="submit"
7+
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
8+
>
9+
Confirm Borrow
10+
</button>
11+
12+
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
13+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-[15px] h-[15px]">
14+
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
15+
</svg>
16+
on conforming collateral amount will be deducted from your account</div>
17+
</div>
18+
)
19+
}
20+
21+
export default Lend

‎src/pages/dashboard.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import DashLeft from "../components/DashLeft/DashLeft"
2+
import DashRight from "../components/DashRight/DashRight"
23

34
const Dashboard = () => {
45
return (
5-
<div className="flex flex-row h-[calc(100vh-55px)] bg-blue">
6+
<div className="flex flex-row h-[calc(100vh-55px)] bg-[#12131A]">
67
<div className="w-[40%]">
78
<DashLeft/>
89
</div>
10+
<div className="w-[60%] box-border p-[30px] pr-[40px]">
11+
<DashRight>
12+
13+
</DashRight>
14+
</div>
915
</div>
1016
)
1117
}

0 commit comments

Comments
 (0)