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  py-24" id="tokenomics">
      <div className="container mx-auto">
        <h1 className="text-5xl 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">
              {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;