SGPT/src/shared/components/home/TokenomicsSection.tsx

import { useSpring, animated } from '@react-spring/web'
import { useEffect, useState } from 'react'
import tokenomicChart from '../../../assets/images/tokenomic-chart.png'

type Props = {}

const tokenomics = [
    {
        title: 'Liquidity - 5% 1,000,000 SGPT',
        description: ' ',
        color: 'bg-[#86eae9]',
    },
    {
        title: 'Private Sale - 17% 3,400,000 SGPT',
        description: ' ',
        color: 'bg-[#5dbdd3]',
    },
    {
        title: 'Stacking & Farming - 15% 3,000,000 SGPT',
        description: ' ',
        color: 'bg-[#4591b8]',
    },
    {
        title: 'Marketing & Promotion - 15% 3,000,000 SGPT',
        description: ' ',
        color: 'bg-[#3b6696]',
    },
    {
        title: 'Public Sale - 14% 2,800,000 SGPT',
        description: ' ',
        color: 'bg-[#353c6e]',
    },
    {
        title: 'Reward & Q&A - 10% 2,000,000 SGPT',
        description: ' ',
        color: 'bg-[#705788]',
    },
    {
        title: 'Advisor - 10% 2,000,000 SGPT',
        description: ' ',
        color: 'bg-[#a5769e]',
    },
    {
        title: 'Treasury - 14% 2,800,000 SGPT',
        description: ' ',
        color: 'bg-[#d59ab3]',
    },
]

const TokenomicsSection = (props: Props) => {
    const [isVisible, setIsVisible] = useState(true)

    useEffect(() => {
        const section = document.querySelector('#tokenomics')
        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,
            transform: 'translateY(100px)',
        },
        to: {
            opacity: isVisible ? 1 : 0,
            transform: 'translateY(0px)',
        },

        config: {
            duration: 500,
        },
    })
    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>

                    <div className="lg:w-1/2">
                        <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,
                                        }}
                                    >
                                        <div
                                            className={`absolute h-full top-0 w-2 ${item.color}`}
                                        ></div>
                                        <h4 className="text-xl font-bold text-gray-700">
                                            {item.title}
                                        </h4>
                                        <p className="text-gray-500">
                                            {item.description}
                                        </p>
                                    </animated.li>
                                )
                            })}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TokenomicsSection