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 [sortAsc, setSortAsc] = useState(false); const [fakeData, setFakeData] = useState([]); useEffect(() => { // fetch data from api on change to sort method fetch(`/api/fakeRanking?s=${sortBy}&a=${sortAsc}`) .then((res) => res.json()) .then((data) => { setFakeData(data.data); }); }, [sortBy, sortAsc]); const SortSVG = (props: { sortType: string; children?: ReactElement }) => { // if not current sort, return a line, otherwise return an arrow corresponding to sortAsc if (sortBy != props.sortType) { return ( ); } return ( ); }; const setSortMethod = (sortType: string) => { // if same sort, toggle asc // a change in sort means asc should be false for intuitive behavior if (sortBy == sortType) { setSortAsc(!sortAsc); } else { setSortAsc(false); setSortBy(sortType); } }; return ( <> Ranking - InvestBot
{/* hidden if smaller than lg */} Top Investors {/* TODO: responsive for extremely skinny displays (i.e. galaxy fold), or really for mobile entirely so info is not lost */} {/* Column names and arrows */}

#

setSortMethod("name")} >

Name

setSortMethod("netWorth")} >

Assets

setSortMethod("points")} >

Points

setSortMethod("shares")} >

Shares

setSortMethod("dailyChange")} >

Daily

{ // generate table rows fakeData.map((entry: fakeDataEntry, index) => { // if daily change is negative, make it red 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) + "%"} ); }) }
); } // entire container page animation 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, }, }, }; // header animation if needed 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, }, }, }; // table container animation 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;