wholespace214
1 year ago
parent
2341a96d8d
commit
d9f66d2a43
@ -0,0 +1,161 @@ |
||||
"use client"; |
||||
|
||||
import React, { useState } from "react"; |
||||
|
||||
import HeaderNav from "@/components/HeaderNav"; |
||||
|
||||
import Image from "next/image"; |
||||
import IconBtn from "@/components/Button/IconBtn"; |
||||
import Input from "@/components/Form/Input"; |
||||
|
||||
import BurnBack from "@/assets/image/burn-back.png"; |
||||
import FlashAudit from "@/assets/image/flash-audit.png"; |
||||
import LogoBig from "@/assets/image/logo-big.png"; |
||||
import Floki from "@/assets/icons/floki.svg"; |
||||
import SearchBlack from "@/assets/icons/search-black.svg"; |
||||
import BurnImage from "@/assets/image/burn-image.png"; |
||||
import SearchToken from "@/components/Form/SearchToken"; |
||||
|
||||
const Burn = () => { |
||||
const [active, setActive] = useState(1); |
||||
const [page, setPage] = useState(3); |
||||
|
||||
const burnList = [ |
||||
{ |
||||
grade: "Diamond", |
||||
amount: "$100", |
||||
slot: 1, |
||||
maxSlot: 20, |
||||
}, |
||||
{ |
||||
grade: "Diamond", |
||||
amount: "$100", |
||||
slot: 1, |
||||
maxSlot: 20, |
||||
}, |
||||
{ |
||||
grade: "Diamond", |
||||
amount: "$100", |
||||
slot: 1, |
||||
maxSlot: 20, |
||||
}, |
||||
{ |
||||
grade: "Diamond", |
||||
amount: "$100", |
||||
slot: 1, |
||||
maxSlot: 20, |
||||
}, |
||||
]; |
||||
return ( |
||||
<div className="relative min-h-[1300px]"> |
||||
<HeaderNav /> |
||||
<div className="flex flex-row justify-center"> |
||||
{page === 3 ? ( |
||||
<div className="mt-[105px] w-[760px] bg-[#1B1B1B] border border-[#2C2C2C] rounded-[16px] px-8 py-9"> |
||||
<div className="flex flex-col items-center gap-14"> |
||||
<Image src={FlashAudit} alt="image" /> |
||||
<Image src={LogoBig} alt="image" /> |
||||
</div> |
||||
<div className="flex flex-col mt-11"> |
||||
<SearchToken /> |
||||
</div> |
||||
<div className="flex flex-col mt-[99px]"> |
||||
<IconBtn |
||||
text="Check" |
||||
TxSize="text-[20px]" |
||||
BgClass="bg-[#FCBF07]" |
||||
rounded="rounded-[8px]" |
||||
TxClass="text-[#16171B]" |
||||
icon={SearchBlack} |
||||
py="py-[16px]" |
||||
heigh="h-[60px]" |
||||
/> |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div className="mt-[105px] w-[760px] bg-[#1B1B1B] border border-[#2C2C2C] rounded-[16px]"> |
||||
<Image src={BurnBack} alt="Image" /> |
||||
<div className="pt-[40px] px-8 pb-7"> |
||||
<p className="text-center text-white text-[42px] font-bold"> |
||||
Burn Floki and earn <br /> Whitelist |
||||
</p> |
||||
|
||||
{page === 1 ? ( |
||||
<table class="w-[100%] border-collapse"> |
||||
<thead> |
||||
<tr className="text-[#86888C] text-[14px] border-b border-[#2C2C2C] h-[49px]"> |
||||
<td className="pl-5 border-none">Grade</td> |
||||
<td className="pl-5 border-none">Burn Floki Amount</td> |
||||
<td className="pl-5 border-none">Whitelist Slot</td> |
||||
<td className="pl-5 border-none">Max Number Of Slots</td> |
||||
</tr> |
||||
</thead> |
||||
<tbody className="text-white text-[14px]"> |
||||
{burnList.map((item, key) => |
||||
active === key ? ( |
||||
<tr |
||||
className="bg-[#FCBF07] h-[49px] cursor-pointer border-none text-[#16171B]" |
||||
key={key} |
||||
onClick={() => setActive(key)} |
||||
> |
||||
<td className="pl-5">{item.grade}</td> |
||||
<td className="pl-5">{item.amount}</td> |
||||
<td className="pl-5">{item.slot}</td> |
||||
<td className="pl-5">{item.maxSlot}</td> |
||||
</tr> |
||||
) : ( |
||||
<tr |
||||
className="h-[49px] cursor-pointer" |
||||
key={key} |
||||
onClick={() => setActive(key)} |
||||
> |
||||
<td className="pl-5 border-b border-[#2C2C2C]"> |
||||
{item.grade} |
||||
</td> |
||||
<td className="pl-5 border-b border-[#2C2C2C]"> |
||||
{item.amount} |
||||
</td> |
||||
<td className="pl-5 border-b border-[#2C2C2C]"> |
||||
{item.slot} |
||||
</td> |
||||
<td className="pl-5 border-b border-[#2C2C2C]"> |
||||
{item.maxSlot} |
||||
</td> |
||||
</tr> |
||||
) |
||||
)} |
||||
</tbody> |
||||
</table> |
||||
) : ( |
||||
<div className="flex flex-col mt-[52px]"> |
||||
<Input /> |
||||
</div> |
||||
)} |
||||
|
||||
<div className="flex flex-col mt-16"> |
||||
<IconBtn |
||||
text={page === 1 ? "Burn Floki" : "Validate Burn"} |
||||
BgClass="bg-[#FCBF07]" |
||||
rounded="rounded-[8px]" |
||||
TxClass="text-[#16171B]" |
||||
icon={Floki} |
||||
py="py-[16px]" |
||||
heigh="h-[60px]" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
{page !== 3 && ( |
||||
<Image |
||||
src={BurnImage} |
||||
alt="image" |
||||
className="absolute -bottom-16 -right-10" |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Burn; |
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 254 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,10 @@ |
||||
const Input = () => { |
||||
return ( |
||||
<input |
||||
type="text" |
||||
className="w-[100%] outline-none border border-[#2C2C2C] bg-[#141414] p-5 rounded-lg text-[#86888C] text-base" |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
export default Input; |
||||
@ -0,0 +1,25 @@ |
||||
const SearchToken = () => { |
||||
return ( |
||||
<div className="w-[100%] flex border border-[#2C2C2C] bg-[#141414] rounded-lg"> |
||||
<div className="w-[147px] bg-[#282828]"> |
||||
<select |
||||
name="" |
||||
id="" |
||||
className="bg-[#282828] p-5 text-white text-base outline-none" |
||||
> |
||||
<option value="eth">Ethereum</option> |
||||
<option value="bnb">Binance</option> |
||||
</select> |
||||
</div> |
||||
<input |
||||
type="text" |
||||
name="" |
||||
id="" |
||||
placeholder="Search token address" |
||||
className="outline-none border-none bg-[#141414] py-[22px] pl-[20px] text-[16px] text-[#86888C]" |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default SearchToken; |
||||
Loading…
Reference in new issue