frontend/src/pages/LeaderboardPage/LeaderboardPage.js

import { useEffect } from "react";
import Leaderboard from "./components/Leaderboard/Leaderboard";
import { Box } from "@mui/material";
import PageHeader from "../../components/shared/PageHeader";
import { useLeaderboardData } from "../../pages/LeaderboardPage/components/Leaderboard/hooks/useLeaderboardData";
import { useLeaderboard } from "../../pages/LeaderboardPage/components/Leaderboard/context/LeaderboardContext";
import { usePageTracking } from "../../hooks/usePageTracking";

function LeaderboardPage({mode}) {
  const { data, isLoading, error } = useLeaderboardData();
  const logoSrc =
    mode === "dark" ? "logo-dark.svg" : "logo.svg";
  const { actions } = useLeaderboard();
  usePageTracking();

  useEffect(() => {
    if (data) {
      actions.setModels(data);
    }
    actions.setLoading(isLoading);
    actions.setError(error);
  }, [data, isLoading, error, actions]);

  return (
    <Box
      sx={{
        width: "100%",
        ph: 2,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{ display: "flex", justifyContent: "center", pt: 6, mb: -4, pb: 0 }}
      >
        <img src={logoSrc} alt="Stacklok" style={{width: 300}} />
      </Box>
      <PageHeader
        title="LLM Security Leaderboard"
        subtitle={
          <>
            Measuring Security Aptitude Across Large Language Models (LLMs).
          </>
        }
      />
      <Leaderboard />
    </Box>
  );
}

export default LeaderboardPage;