Thuong_e
2 years ago
parent
abdbb9350e
commit
e7cc1d132d
@ -1,28 +1,187 @@ |
||||
import { useSpring, animated } from '@react-spring/web' |
||||
import React, { useEffect, useRef, useState } from 'react' |
||||
import { VscDebugBreakpointLog } from 'react-icons/vsc' |
||||
|
||||
type Props = {} |
||||
import { useSpring, animated } from "@react-spring/web"; |
||||
import React, { useEffect, useRef, useState } from "react"; |
||||
import { |
||||
VscArrowDown, |
||||
VscChevronDown, |
||||
VscDebugBreakpointLog, |
||||
VscDiffAdded, |
||||
} from "react-icons/vsc"; |
||||
import "../animated/QnASection.css"; |
||||
type Props = {}; |
||||
|
||||
const QnASection = (props: Props) => { |
||||
const listQnA = [ |
||||
{ |
||||
id: 1, |
||||
title: "Abc", |
||||
bgcolor: "bg-[#CC99FF]", |
||||
contents: [ |
||||
{ |
||||
id: 1, |
||||
content: "12sdfsd3", |
||||
bgcolor: "bg-[#9999FF]", |
||||
}, |
||||
{ |
||||
id: 2, |
||||
content: "123ádsa", |
||||
bgcolor: "bg-[#6699FF]", |
||||
}, |
||||
{ |
||||
id: 3, |
||||
content: "123ádas", |
||||
bgcolor: "bg-[#3399FF]", |
||||
}, |
||||
{ |
||||
id: 4, |
||||
content: "123ádasd", |
||||
bgcolor: "bg-[#0099FF]", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
id: 2, |
||||
title: "Abcd", |
||||
bgcolor: "bg-[#CC66FF]", |
||||
|
||||
contents: [ |
||||
{ |
||||
id: 1, |
||||
bgcolor: "bg-[#9966FF]", |
||||
content: "ádasffjk12", |
||||
}, |
||||
{ |
||||
id: 2, |
||||
bgcolor: "bg-[#6666FF]", |
||||
content: "ádasffj1k", |
||||
}, |
||||
{ |
||||
id: 3, |
||||
bgcolor: "bg-[#3366FF]", |
||||
content: "ádasffj12k", |
||||
}, |
||||
{ |
||||
id: 4, |
||||
bgcolor: "bg-[#0066FF]", |
||||
content: "ádasffj123k", |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
const showListItem = (id: string) => { |
||||
const element = document.getElementById(`${id}`); |
||||
// const ulhidden = document.querySelector(`#${id} ul`);
|
||||
const ulhidden = document.querySelector(`#${id}>ul`); |
||||
console.log(ulhidden); |
||||
ulhidden?.classList.toggle("hidden"); |
||||
ulhidden?.classList.toggle("flex"); |
||||
}; |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
const section = document.querySelector("#qna"); |
||||
const observer = new IntersectionObserver( |
||||
([entry]) => { |
||||
setIsVisible(entry.isIntersecting); |
||||
}, |
||||
{ threshold: 0.5 } |
||||
); |
||||
|
||||
if (!section) { |
||||
return; |
||||
} |
||||
observer.observe(section); |
||||
|
||||
return () => { |
||||
observer.unobserve(section); |
||||
}; |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
console.log("isVisible", isVisible); |
||||
}, [isVisible]); |
||||
|
||||
const styles = useSpring({ |
||||
opacity: isVisible ? 1 : 0, |
||||
from: { |
||||
opacity: 0, |
||||
}, |
||||
to: { |
||||
opacity: isVisible ? 1 : 0, |
||||
}, |
||||
|
||||
config: { |
||||
duration: 1000, |
||||
}, |
||||
}); |
||||
|
||||
return ( |
||||
<div |
||||
className="container flex justify-between items-center mx-auto py-2 text-white" |
||||
className="container min-h-[400px] mb-[100px] flex flex-wrap lg:justify-between justify-center items-start mx-auto py-2 text-white " |
||||
id="qna" |
||||
> |
||||
<div> |
||||
<div className="w-full lg:w-[50%]"> |
||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
||||
FAQS |
||||
</h1> |
||||
<h2> |
||||
<h2 className="text-center "> |
||||
See some of the most frequently asked questions about Fight |
||||
{/* Out here. Got a question that’s not on the list? Let us know |
||||
below! */} |
||||
</h2> |
||||
</div> |
||||
<div>ABC</div> |
||||
|
||||
<animated.div |
||||
className="w-1/2 flex justify-end overflow-hidden" |
||||
style={{ |
||||
...styles, |
||||
}} |
||||
> |
||||
<ul className="flex flex-col items-center gap-4 lg:w-3/4 w-full "> |
||||
{listQnA.map((item, index) => { |
||||
return ( |
||||
<li |
||||
id={item.title} |
||||
key={item.id} |
||||
className="w-full items-center flex flex-col pl-3 pr-3 " |
||||
> |
||||
<div className="w-full h-[52px] flex justify-between items-center bg-slate-200 pl-3 pr-3 z-10 relative "> |
||||
<div |
||||
className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`} |
||||
></div> |
||||
<span className="text-xl font-bold text-gray-700"> |
||||
{item.title} |
||||
</span> |
||||
<div |
||||
className="listQnA h-6 w-6 flex cursor-pointer " |
||||
onClick={() => showListItem(item.title)} |
||||
> |
||||
<VscChevronDown className="hover:text-2xl m-auto text-gray-700" /> |
||||
</div> |
||||
</div> |
||||
<ul className="hidden ul-hidden flex-col gap-y-0.5 pt-1 pl-0.5 w-full list-answer animate-[listShowdown_0.75s_ease] animate-[listHidden_0.75s_ease]"> |
||||
{item.contents.map((list, index) => { |
||||
return ( |
||||
<li |
||||
key={list.id} |
||||
className=" w-full h-10 flex items-center border-t-2 border-gray-400 pl-3 pr-3 bg-slate-200 relative" |
||||
> |
||||
<div |
||||
className={`absolute h-full left-0 top-0 w-2 ${list.bgcolor}`} |
||||
></div> |
||||
<span className="text-lg font-bold text-gray-700"> |
||||
{list.content} |
||||
</span> |
||||
</li> |
||||
); |
||||
})} |
||||
</ul> |
||||
</li> |
||||
); |
||||
})} |
||||
</ul> |
||||
</animated.div> |
||||
</div> |
||||
) |
||||
} |
||||
); |
||||
}; |
||||
|
||||
export default QnASection |
||||
export default QnASection; |
||||
|
||||
@ -1,138 +1,191 @@ |
||||
import { useSpring, animated } from '@react-spring/web' |
||||
import { useEffect, useState } from 'react' |
||||
import tokenomicChart from '../../../assets/images/tokenomic-chart.png' |
||||
|
||||
type Props = {} |
||||
import { useSpring, animated } from "@react-spring/web"; |
||||
import { useEffect, useState } from "react"; |
||||
import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; |
||||
import { Pie } from "react-chartjs-2"; |
||||
import "chart.js/auto"; |
||||
type Props = {}; |
||||
|
||||
const tokenomics = [ |
||||
{ |
||||
title: 'Liquidity - 5% 1,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#86eae9]', |
||||
title: "Liquidity - 5% 1,000,000 SGPT", |
||||
precent: "5", |
||||
description: " ", |
||||
color: "#86eae9", |
||||
bgcolor: "bg-[#86eae9]", |
||||
}, |
||||
{ |
||||
title: 'Private Sale - 17% 3,400,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#5dbdd3]', |
||||
title: "Private Sale - 17% 3,400,000 SGPT", |
||||
description: " ", |
||||
precent: "17", |
||||
color: "#5dbdd3", |
||||
bgcolor: "bg-[#5dbdd3]", |
||||
}, |
||||
{ |
||||
title: 'Stacking & Farming - 15% 3,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#4591b8]', |
||||
title: "Stacking & Farming - 15% 3,000,000 SGPT", |
||||
description: " ", |
||||
precent: "15", |
||||
color: "#4591b8", |
||||
bgcolor: "bg-[#4591b8]", |
||||
}, |
||||
{ |
||||
title: 'Marketing & Promotion - 15% 3,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#3b6696]', |
||||
title: "Marketing & Promotion - 15% 3,000,000 SGPT", |
||||
description: " ", |
||||
precent: "15", |
||||
color: "#3b6696", |
||||
bgcolor: "bg-[#3b6696]", |
||||
}, |
||||
{ |
||||
title: 'Public Sale - 14% 2,800,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#353c6e]', |
||||
title: "Public Sale - 14% 2,800,000 SGPT", |
||||
description: " ", |
||||
precent: "14", |
||||
color: "#353c6e", |
||||
bgcolor: "bg-[#353c6e]", |
||||
}, |
||||
{ |
||||
title: 'Reward & Q&A - 10% 2,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#705788]', |
||||
title: "Reward & Q&A - 10% 2,000,000 SGPT", |
||||
description: " ", |
||||
precent: "10", |
||||
color: "#705788", |
||||
bgcolor: "bg-[#705788]", |
||||
}, |
||||
{ |
||||
title: 'Advisor - 10% 2,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#a5769e]', |
||||
title: "Advisor - 10% 2,000,000 SGPT", |
||||
description: " ", |
||||
precent: "10", |
||||
color: "#a5769e", |
||||
bgcolor: "bg-[#a5769e]", |
||||
}, |
||||
{ |
||||
title: 'Treasury - 14% 2,800,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#d59ab3]', |
||||
title: "Treasury - 14% 2,800,000 SGPT", |
||||
description: " ", |
||||
precent: "14", |
||||
color: "#d59ab3", |
||||
bgcolor: "bg-[#d59ab3]", |
||||
}, |
||||
] |
||||
]; |
||||
|
||||
const TokenomicsSection = (props: Props) => { |
||||
const [isVisible, setIsVisible] = useState(true) |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
const section = document.querySelector('#tokenomics') |
||||
const section = document.getElementById("tokenomics"); |
||||
const observer = new IntersectionObserver( |
||||
([entry]) => { |
||||
setIsVisible(entry.isIntersecting) |
||||
setIsVisible(entry.isIntersecting); |
||||
}, |
||||
{ threshold: 0.5 } |
||||
) |
||||
); |
||||
|
||||
if (!section) { |
||||
return |
||||
return; |
||||
} |
||||
observer.observe(section) |
||||
observer.observe(section); |
||||
|
||||
return () => { |
||||
observer.unobserve(section) |
||||
} |
||||
}, []) |
||||
observer.unobserve(section); |
||||
}; |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
console.log('isVisible', isVisible) |
||||
}, [isVisible]) |
||||
console.log("isVisible", isVisible); |
||||
}, [isVisible]); |
||||
|
||||
const styles = useSpring({ |
||||
opacity: isVisible ? 1 : 0, |
||||
from: { |
||||
opacity: 0, |
||||
transform: 'translateY(100px)', |
||||
}, |
||||
to: { |
||||
opacity: isVisible ? 1 : 0, |
||||
transform: 'translateY(0px)', |
||||
}, |
||||
|
||||
transform: isVisible ? "translateY(0)" : "translateY(100px)", |
||||
config: { |
||||
duration: 500, |
||||
}, |
||||
}) |
||||
}); |
||||
|
||||
const textCenter = { |
||||
id: "textCenter", |
||||
beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) { |
||||
const { ctx, data } = chart; |
||||
ctx.save(); |
||||
ctx.fillStyle = "#fff"; |
||||
ctx.font = "bolder 30px sen"; |
||||
ctx.textAlign = "center"; |
||||
ctx.textBaseline = "middle"; |
||||
ctx.fillText( |
||||
`TOTAL SUPPLE`, |
||||
chart.getDatasetMeta(0).data[0].x, |
||||
chart.getDatasetMeta(0).data[0].y - 20 |
||||
); |
||||
ctx.fillText( |
||||
`20,000,000 SGPT`, |
||||
chart.getDatasetMeta(0).data[0].x, |
||||
chart.getDatasetMeta(0).data[0].y + 25 |
||||
); |
||||
}, |
||||
}; |
||||
const [userData, setUserData] = useState({ |
||||
labels: tokenomics.map((data) => data.title), |
||||
datasets: [ |
||||
{ |
||||
// label: "text",
|
||||
data: tokenomics.map((data) => data.precent), |
||||
backgroundColor: tokenomics.map((data) => data.color), |
||||
// cutout: "10%",
|
||||
borderWidth: 2, |
||||
delay: 100, |
||||
}, |
||||
], |
||||
}); |
||||
const labelText = { |
||||
hoverBorderWidth: 4, |
||||
plugins: { |
||||
legend: { |
||||
display: false, |
||||
}, |
||||
tooltip: { |
||||
callbacks: { |
||||
label: (context: any) => { |
||||
return ` ${context.label}`; |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
return ( |
||||
<div className="w-full pb-24" id="tokenomics"> |
||||
<div className="container mx-auto"> |
||||
<h1 className="text-4xl text-white font-bold text-center mb-20"> |
||||
Tokenomics |
||||
</h1> |
||||
|
||||
<div className="w-full flex flex-col gap-4 lg:flex-row"> |
||||
<div className="lg:w-1/2 flex justify-center"> |
||||
<img |
||||
src={tokenomicChart} |
||||
alt="" |
||||
className="rounded-3xl w-[80%]" |
||||
/> |
||||
<div className="w-full flex justify-center items-center lg:justify-between flex-col gap-y-12 gap-x-4 lg:flex-row"> |
||||
<div className="w-full lg:w-1/2 flex justify-center"> |
||||
<animated.div style={{ width: "500px", ...styles }}> |
||||
<Pie data={userData} plugins={[textCenter]} options={labelText} /> |
||||
</animated.div> |
||||
</div> |
||||
|
||||
<div className="lg:w-1/2"> |
||||
<div className="w-full justify-center"> |
||||
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer"> |
||||
{tokenomics.map((item, index) => { |
||||
return ( |
||||
<animated.li |
||||
key={index} |
||||
className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`} |
||||
style={{ |
||||
...styles, |
||||
}} |
||||
className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative`} |
||||
style={styles} |
||||
> |
||||
<div |
||||
className={`absolute h-full top-0 w-2 ${item.color}`} |
||||
className={`absolute h-full top-0 w-2 ${item.bgcolor}`} |
||||
></div> |
||||
<h4 className="text-xl font-bold text-gray-700"> |
||||
{item.title} |
||||
</h4> |
||||
<p className="text-gray-500"> |
||||
{item.description} |
||||
</p> |
||||
<p className="text-gray-500">{item.description}</p> |
||||
</animated.li> |
||||
) |
||||
); |
||||
})} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
); |
||||
}; |
||||
|
||||
export default TokenomicsSection |
||||
export default TokenomicsSection; |
||||
|
||||
@ -0,0 +1,26 @@ |
||||
<div> |
||||
<div className="timeline"> |
||||
<div className="timeline-container primary"> |
||||
<div className="timeline-icon"> |
||||
{index + 1} |
||||
{/* <i className="far fa-grin-wink"></i> */} |
||||
</div> |
||||
<div className="timeline-body"> |
||||
<h4 className="timeline-title">{item.phase}</h4> |
||||
<ol className="flex flex-col gap-2"> |
||||
{item.listTitle.map((listItem, index) => { |
||||
return ( |
||||
<li |
||||
key={index} |
||||
className="flex items-center gap-3 text-lg" |
||||
> |
||||
<VscDebugBreakpointLog /> |
||||
<p className="font-medium font-body">{listItem}</p> |
||||
</li> |
||||
); |
||||
})} |
||||
</ol> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue