complete the burn page

main
wholespace214 1 year ago
parent 2341a96d8d
commit d9f66d2a43
  1. 161
      src/app/burn/page.js
  2. 3
      src/assets/icons/search-black.svg
  3. BIN
      src/assets/image/burn-back.png
  4. BIN
      src/assets/image/burn-image.png
  5. BIN
      src/assets/image/flash-audit.png
  6. BIN
      src/assets/image/logo-big.png
  7. 6
      src/components/Button/IconBtn/index.js
  8. 10
      src/components/Form/Input/index.js
  9. 25
      src/components/Form/SearchToken/index.js
  10. 2
      src/components/Layouts/SideBar/index.js

@ -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;

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2559 14.0731L12.4226 11.248C13.3367 10.0834 13.8327 8.64526 13.8309 7.16472C13.8309 5.84617 13.4399 4.55724 12.7074 3.46091C11.9748 2.36459 10.9336 1.5101 9.71545 1.00552C8.49728 0.500935 7.15683 0.368913 5.86363 0.626148C4.57042 0.883383 3.38253 1.51832 2.45018 2.45067C1.51783 3.38302 0.882895 4.57091 0.62566 5.86411C0.368425 7.15732 0.500447 8.49777 1.00503 9.71594C1.50962 10.9341 2.3641 11.9753 3.46043 12.7078C4.55675 13.4404 5.84569 13.8314 7.16423 13.8314C8.64477 13.8332 10.0829 13.3372 11.2476 12.423L14.0726 15.2564C14.15 15.3345 14.2422 15.3965 14.3437 15.4388C14.4453 15.4811 14.5542 15.5029 14.6642 15.5029C14.7742 15.5029 14.8832 15.4811 14.9847 15.4388C15.0863 15.3965 15.1784 15.3345 15.2559 15.2564C15.334 15.1789 15.396 15.0867 15.4383 14.9852C15.4806 14.8836 15.5024 14.7747 15.5024 14.6647C15.5024 14.5547 15.4806 14.4458 15.4383 14.3442C15.396 14.2427 15.334 14.1505 15.2559 14.0731ZM2.16423 7.16472C2.16423 6.17581 2.45747 5.20911 3.00688 4.38687C3.55629 3.56462 4.33718 2.92376 5.25081 2.54532C6.16444 2.16688 7.16977 2.06786 8.13968 2.26079C9.10958 2.45372 10.0005 2.92992 10.6998 3.62918C11.399 4.32845 11.8752 5.21936 12.0682 6.18927C12.2611 7.15917 12.1621 8.1645 11.7836 9.07813C11.4052 9.99176 10.7643 10.7727 9.94208 11.3221C9.11983 11.8715 8.15313 12.1647 7.16423 12.1647C5.83815 12.1647 4.56638 11.6379 3.62869 10.7003C2.69101 9.76257 2.16423 8.4908 2.16423 7.16472Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

@ -20,10 +20,8 @@ const IconBtn = ({
className={`${px} ${py} flex justify-center items-center gap-2 ${rounded} ${heigh} ${BgClass} border ${borderColor}`}
>
<Image src={icon} alt="image" />
<p className={`${TxClass} text-[14px] font-semibold capitalize`}>
{text}
</p>
{ rightIcon && <Image src={rightIcon} alt="image" /> }
<p className={`${TxClass} ${TxSize} font-semibold capitalize`}>{text}</p>
{rightIcon && <Image src={rightIcon} alt="image" />}
</button>
);
};

@ -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;

@ -95,7 +95,7 @@ const SideBar = () => {
<hr className="h-px w-[206px] mt-5 ml-10 bg-[#2C2C2C] border-0"></hr>
</div>
<div className="mt-[102.77px]">
<div className="mt-[28px]">
<p className="text-[#86888c] text-[14px] font-semibold uppercase tracking-[1.5px] pl-10">
DEVELOPERS
</p>

Loading…
Cancel
Save