complete the profile page

main
wholespace214 1 year ago
parent eb8aaa19a5
commit f9edaa19eb
  1. 5
      src/app/fair-launch/page.js
  2. 206
      src/app/profile/page.js
  3. 3
      src/assets/icons/copy-yello.svg
  4. 10
      src/assets/icons/filter.svg
  5. 6
      src/assets/icons/no-data.svg
  6. 4
      src/assets/icons/page-left.svg
  7. 4
      src/assets/icons/page-right-active.svg

@ -0,0 +1,5 @@
"use client";
const FairLaunch = () => {
return <div></div>;
};

@ -0,0 +1,206 @@
"use client";
import React, { useState, useEffect } from "react";
import HeaderSection from "@/components/HeaderSection";
import Image from "next/image";
//! import icon
import CopyYelloIcon from "@/assets/icons/copy-yello.svg";
import Filter from "@/assets/icons/filter.svg";
import NoDataIcon from "@/assets/icons/no-data.svg";
import LogoIcon from "@/assets/icons/logo.svg";
import PageLeftIcon from "@/assets/icons/page-left.svg";
import PageRightActive from "@/assets/icons/page-right-active.svg";
const Profile = () => {
const [tabActive, setTabActive] = useState(0);
const tabItems = [
{ name: "Activities" },
{ name: "Affiliate" },
{ name: "Favorited" },
{ name: "Recently Viewed" },
];
return (
<div className="min-h-[1300px]">
<HeaderSection />
<div className="p-7 bg-[#1B1B1B] rounded-[16px]">
<div className="flex flex-col gap-3 pb-8 border-b border-[#2C2C2C]">
<div className="flex flex-row gap-2">
<p className="text-white text-[16px]">
Connected as 0x15f5aC23FEA29c0f8be082EB490D3a18d7d08892
</p>
<Image src={CopyYelloIcon} alt="icon" />
</div>
<p className="text-[16px] text-[#FCBF07]">0.639639 ETH</p>
</div>
<div className="flex flex-row gap-4 mt-7">
<button className="py-3 px-5 rounded-lg bg-[#FCBF07]">
Share your profile
</button>
<button className="py-3 px-5 rounded-lg border border-[#2C2C2C] text-[#86888C]">
Logout
</button>
</div>
</div>
<div className="p-7 rounded-[16px] bg-[#1B1B1B] mt-6 min-h-[567px]">
<div className="flex flex-row pb-5 border-b border-[#2C2C2C] gap-8">
{tabItems.map((item, index) => (
<div
className="relative cursor-pointer"
key={index}
onClick={() => setTabActive(index)}
>
<p
className={`text-base ${
tabActive === index ? "text-[#FCBF07]" : "text-white"
}`}
>
{item.name}
</p>
{tabActive === index && (
<hr className="h-0.5 border-0 bg-[#FCBF07] w-[100%] absolute -bottom-[21px] left-0"></hr>
)}
</div>
))}
</div>
<div className="mt-8">
{tabActive === 0 && (
<div>
<div className="py-[46px] justify-center w-[100%] border border-[#2C2C2C] flex flex-row gap-[345px]">
<div className="flex flex-col items-center text-white gap-3">
<p className="text-base">TOTAL POOL INVESTED</p>
<p className="text-4xl">0</p>
</div>
<div className="flex flex-col items-center text-white gap-3">
<p className="text-base">TOTAL POOL INVESTED</p>
<p className="text-4xl">0</p>
</div>
<div className="flex flex-col items-center text-white gap-3">
<p className="text-base">TOTAL POOL INVESTED</p>
<p className="text-4xl">0</p>
</div>
</div>
<div className="mt-[70px]">
<div className="flex flex-row text-base text-white pb-4 border-b border-[#2C2C2C]">
<div className="w-[250px] border-r border-[#2C2C2C] pr-6">
Name
</div>
<div className="w-[250px] pl-3 pr-6 border-r border-[#2C2C2C]">
Data
</div>
<div className="w-[250px] pl-3 pr-6 border-r border-[#2C2C2C]">
Amount
</div>
<div className="flex flex-row pl-3 pr-6 border-r border-[#2C2C2C]">
<p className="w-[250px]">Type</p>
<Image src={Filter} alt="filter" />
</div>
<div className="w-[250px] pl-3 pr-6 border-r border-[#2C2C2C]">
Transaction
</div>
</div>
<div className="h-[285px] flex flex-col justify-center items-center gap-3 border-b border-[#2C2C2C]">
<Image src={NoDataIcon} alt="no data" />
<p className="text-lg text-[#2F2F2F]">No Data</p>
</div>
</div>
</div>
)}
{tabActive === 1 && (
<div className="flex flex-col justify-center items-center gap-3 mt-[191px]">
<Image src={NoDataIcon} alt="no data" />
<p className="text-lg text-[#2F2F2F]">No Data</p>
</div>
)}
{tabActive === 2 && (
<div className="">
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row gap-[30px]">
<Image
src={LogoIcon}
alt="logo icon"
className="rounded-full w-[48px] h-[48px]"
/>
<div className="text-white flex flex-col gap-1 text-base">
<p className="font-semibold">Flash 3.0 Fairlaunch</p>
<p className="font-semibold">Flash</p>
</div>
</div>
<p className="text-base text-[#FCBF07] cursor-pointer">View</p>
</div>
</div>
)}
{tabActive === 3 && (
<div>
<div className="flex flex-col gap-4">
{Array.from({ length: 7 }).map((item, index) => (
<div
className="flex flex-row items-center justify-between border-b border-[#2C2C2C] pb-4"
key={index}
>
<div className="flex flex-row gap-[30px]">
<Image
src={LogoIcon}
alt="logo icon"
className="rounded-full w-[48px] h-[48px]"
/>
<div className="text-white flex flex-col gap-1 text-base">
<p className="font-semibold">Flash 3.0 Fairlaunch</p>
<p className="font-semibold">Flash</p>
</div>
</div>
<p className="text-base text-[#FCBF07] cursor-pointer">
View
</p>
</div>
))}
</div>
<div className="mt-[30px] flex flex-row gap-[11.2px] justify-end">
<div className="w-[28px] h-[28px] bg-[#282828] rounded-[5.6px] flex flex-row justify-center items-center">
<Image src={PageLeftIcon} alt="page" />
</div>
<div className="w-[28px] h-[28px] bg-[#282828] rounded-[5.6px] flex flex-row justify-center items-center">
<p className="text-base text-[#86888C]">1</p>
</div>
<div className="w-[28px] h-[28px] bg-[#282828] rounded-[5.6px] flex flex-row justify-center items-center">
<p className="text-base text-[#86888C]">2</p>
</div>
<div className="w-[28px] h-[28px] bg-[#282828] rounded-[5.6px] flex flex-row justify-center items-center">
<p className="text-base text-[#86888C]">3</p>
</div>
<div className="w-[28px] h-[28px] bg-[#282828] rounded-[5.6px] flex flex-row justify-center items-center">
<p className="text-base text-[#86888C]">4</p>
</div>
<div className="w-[28px] h-[28px] bg-[#282828] rounded-[5.6px] flex flex-row justify-center items-center">
<Image src={PageRightActive} alt="page" />
</div>
</div>
</div>
)}
</div>
</div>
{(tabActive === 1 || tabActive === 2) && (
<div className="mt-[157px] flex flex-row justify-center">
<p className="text-center text-lg text-white w-[1155px]">
Disclaimer: Flashlaunch will never endorse or encourage that you
invest in any of the projects listed and therefore, accept no
liability for any loss occasioned. It is the users responsibility to
do their own research and seek financial advice from a professional.
More information about (DOR) can be found via{" "}
<span className="text-[#FCBF07]">Binance Academy</span>.
</p>
</div>
)}
</div>
);
};
export default Profile;

@ -0,0 +1,3 @@
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1818 0H1.45455C0.654545 0 0 0.654545 0 1.45455V11.6364H1.45455V1.45455H10.1818V0ZM12.3636 2.90909H4.36364C3.56364 2.90909 2.90909 3.56364 2.90909 4.36364V14.5455C2.90909 15.3455 3.56364 16 4.36364 16H12.3636C13.1636 16 13.8182 15.3455 13.8182 14.5455V4.36364C13.8182 3.56364 13.1636 2.90909 12.3636 2.90909ZM12.3636 14.5455H4.36364V4.36364H12.3636V14.5455Z" fill="#FCBF07"/>
</svg>

After

Width:  |  Height:  |  Size: 491 B

@ -0,0 +1,10 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_893_26283)">
<path d="M2.83248 4.24033C4.17914 5.96699 6.66581 9.16699 6.66581 9.16699V13.167C6.66581 13.5337 6.96581 13.8337 7.33248 13.8337H8.66581C9.03248 13.8337 9.33248 13.5337 9.33248 13.167V9.16699C9.33248 9.16699 11.8125 5.96699 13.1591 4.24033C13.4991 3.80033 13.1858 3.16699 12.6325 3.16699H3.35914C2.80581 3.16699 2.49248 3.80033 2.83248 4.24033Z" fill="#86888C"/>
</g>
<defs>
<clipPath id="clip0_893_26283">
<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 641 B

@ -0,0 +1,6 @@
<svg width="107" height="74" viewBox="0 0 107 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.7">
<path d="M53.3115 73.9163C82.6272 73.9163 106.161 64.9275 106.161 57.0313C106.161 52.5468 97.3849 48.3093 85.3908 45.6879L84.2368 51.8041L52.5893 64.807L21.0015 50.8631V45.4527C9.00737 48.074 0 52.5468 0 57.0313C0 64.9275 23.9958 73.9163 53.3115 73.9163Z" fill="#383838"/>
<path d="M36.7585 6.70621C27.9221 10.388 20.6373 13.5702 20.5058 13.7543C20.2428 14.1751 20.2428 51.5721 20.5058 51.9928C20.7162 52.3084 52.6167 65.7471 53.169 65.7471C53.7213 65.7471 85.6218 52.3084 85.8322 51.9928C86.0952 51.5721 86.0952 14.1751 85.8322 13.7543C85.5955 13.3861 53.6687 0 53.1164 0C52.9323 0.0262985 45.5686 3.02437 36.7585 6.70621ZM56.509 4.12892C58.1395 4.81269 59.4018 5.44386 59.2966 5.54906C58.9811 5.83834 32.84 17.4361 32.4981 17.4361C32.1036 17.4361 25.2922 14.6485 25.2922 14.4644C25.2922 14.254 52.4589 2.94547 53.0375 2.91917C53.3005 2.89287 54.8784 3.44515 56.509 4.12892ZM66.2658 8.20524C68.0279 8.94161 69.3954 9.65168 69.2902 9.75687C69.185 9.86207 63.1363 12.5971 55.8515 15.8582L42.6495 21.7754L39.3621 20.4342C37.5475 19.6978 36.0748 19.0141 36.0748 18.9352C36.0748 18.83 62.321 7.02179 62.8996 6.864C62.9785 6.864 64.4775 7.44257 66.2658 8.20524ZM77.0221 12.676C79.2312 13.5965 81.0458 14.3855 81.0458 14.4644C81.0458 14.6485 53.6161 26.0359 53.169 26.0359C52.9586 26.0359 51.2492 25.3784 49.3557 24.6157L45.9368 23.1693L47.7777 22.354C48.8034 21.9069 54.8258 19.1982 61.1902 16.3316C67.5545 13.4387 72.8142 11.0718 72.8931 11.0718C72.972 11.0455 74.8393 11.7819 77.0221 12.676ZM37.5475 22.5381L51.8541 28.4817V45.4181C51.8541 54.7016 51.7752 62.3283 51.6963 62.3283C51.6174 62.3283 45.0953 59.6458 37.2319 56.3584L22.9253 50.4149V33.4784C22.9253 24.1949 23.0042 16.5683 23.0831 16.5683C23.162 16.5683 29.6841 19.2508 37.5475 22.5381ZM83.4127 33.4784V50.4149L69.1061 56.3584C61.2428 59.6458 54.7206 62.3283 54.6417 62.3283C54.5628 62.3283 54.4839 54.7016 54.4839 45.4181V28.4817L68.7642 22.5381C76.6013 19.2508 83.0971 16.5683 83.2286 16.5683C83.3338 16.5683 83.4127 24.1949 83.4127 33.4784Z" fill="#282828"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8359 9.9998H4.16927" stroke="#86888C" stroke-width="1.68" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 4.1673L4.16667 10.0006L10 15.834" stroke="#86888C" stroke-width="1.68" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 356 B

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16406 9.9998H15.8307" stroke="#FCBF07" stroke-width="1.68" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 4.1673L15.8333 10.0006L10 15.834" stroke="#FCBF07" stroke-width="1.68" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 356 B

Loading…
Cancel
Save