import { m, Variants } from "framer-motion";
import Head from "next/head";
import { ReactElement, useEffect, useState } from "react";
import DashLayout from "../../layouts/DashLayout";
import { fakeDataEntry } from "../api/fakeRanking";
function Ranking() {
const [sortBy, setSortBy] = useState("netWorth");
const [fakeData, setFakeData] = useState([]);
useEffect(() => {
fetch(`/api/fakeRanking?s=${sortBy}`)
.then((res) => res.json())
.then((data) => {
setFakeData(data.data);
});
}, [sortBy]);
return (
<>
Ranking - InvestBot
Top Investors
#
setSortBy("name")}
>
Name
setSortBy("netWorth")}>Assets
setSortBy("points")}
>
Points
setSortBy("shares")}
>
Shares
setSortBy("dailyChange")}>Daily
{
// TODO: add arrow to show which column is being sorted by and which direction
fakeData.map((entry: fakeDataEntry, index) => {
let changeClass = " text-lime-500";
if (entry.dailyChangePercent < 0) {
changeClass = " text-red-500";
}
return (
{index + 1}
{entry.name}
{entry.netWorth.toLocaleString("en-US")}
{entry.points.toLocaleString("en-US")}
{entry.shares.toLocaleString("en-US")}
{(
Math.round(entry.dailyChangePercent * 1000) / 10
).toFixed(1) + "%"}
);
})
}
);
}
const containerVariants: Variants = {
initial: {
opacity: 1,
},
animate: {
opacity: 1,
transition: {
duration: 2,
delayChildren: 0.5,
staggerChildren: 0.25,
type: "spring",
bounce: 0.5,
stiffness: 80,
},
},
};
const headerVariants: Variants = {
initial: {
opacity: 0,
y: -100,
},
animate: {
opacity: 1,
y: 0,
transition: {
delay: 1.0,
duration: 1.0,
type: "spring",
bounce: 0.5,
stiffness: 60,
},
},
};
const rankingCardVariants: Variants = {
initial: {
opacity: 0,
y: 300,
},
animate: {
opacity: 1,
y: 0,
transition: {
duration: 3,
delayChildren: 0.5,
staggerChildren: 0.25,
type: "spring",
bounce: 0.5,
stiffness: 40,
},
},
};
Ranking.getLayout = function getLayout(page: ReactElement) {
return {page};
};
export default Ranking;