frontend/src/pages/QuotePage/QuotePage.js

import React from "react";
import {
  Box,
  Typography,
  Paper,
  IconButton,
  Tooltip,
  Alert,
  Link,
} from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import PageHeader from "../../components/shared/PageHeader";

const citations = [
  {
    title: "LLM Security Leaderboard",
    authors:
      "Pankaj Telang, Eleftheria Stein-Kousathana, Doug Wright, Daniel Kantor",
    citation: `@misc{llm-security-leaderboard-v1,
  author = {Pankaj Telang and Eleftheria Stein-Kousathana and Doug Wright and Daniel Kantor},
  title = {LLM Security Leaderboard},
  year = {2025},
  publisher = {Hugging Face},
  howpublished = "\\url{https://huggingface.co/spaces/stacklok/llm-security-leaderboard}",
}`,
    type: "main",
  },
  {
    title: "LLM Security Leaderboard Evaluation Backend",
    authors:
      "Pankaj Telang, Eleftheria Stein-Kousathana, Doug Wright, Daniel Kantor",
    citation: `@misc{stacklok/llm-security-evaluation-backend-v1,
  author = {Pankaj Telang and Eleftheria Stein-Kousathana and Doug Wright and Daniel Kantor},
  title = {LLM Security Leaderboard Evaluation Backend},
  year = {2025},
  publisher = {Hugging Face},
  howpublished = "\\url{https://huggingface.co/spaces/stacklok/llm-security-evaluation-backend}",
}`,
    type: "main",
  },
];

const priorWork = [
  {
    title: "Open LLM Leaderboard v2",
    authors:
      "Clémentine Fourrier, Nathan Habib, Alina Lozovskaya, Konrad Szafer, Thomas Wolf",
    citation: `@misc{open-llm-leaderboard-v2,
  author = {Clémentine Fourrier and Nathan Habib and Alina Lozovskaya and Konrad Szafer and Thomas Wolf},
  title = {Open LLM Leaderboard v2},
  year = {2024},
  publisher = {Hugging Face},
  howpublished = "\\url{https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard}",
}`,
    type: "main",
  },
  {
    title: "Open LLM Leaderboard v1",
    authors:
      "Edward Beeching, Clémentine Fourrier, Nathan Habib, Sheon Han, Nathan Lambert, Nazneen Rajani, Omar Sanseviero, Lewis Tunstall, Thomas Wolf",
    citation: `@misc{open-llm-leaderboard-v1,
  author = {Edward Beeching and Clémentine Fourrier and Nathan Habib and Sheon Han and Nathan Lambert and Nazneen Rajani and Omar Sanseviero and Lewis Tunstall and Thomas Wolf},
  title = {Open LLM Leaderboard (2023-2024)},
  year = {2023},
  publisher = {Hugging Face},
  howpublished = "\\url{https://huggingface.co/spaces/open-llm-leaderboard-old/open_llm_leaderboard}"
}`,
    type: "main",
  },
];

const benchmarks = [
];

const CitationBlock = ({ citation, title, authors, url, type }) => {
  const handleCopy = () => {
    navigator.clipboard.writeText(citation);
  };

  return (
    <Paper
      elevation={0}
      sx={{
        p: 3,
        border: "1px solid",
        borderColor: "grey.200",
        backgroundColor: "transparent",
        borderRadius: 2,
        position: "relative",
      }}
    >
      <Box sx={{ mb: 2 }}>
        <Typography variant="h6" sx={{ mb: 0.5 }}>
          {title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {authors}
        </Typography>
        {url && (
          <Link
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            sx={{ fontSize: "0.875rem", display: "block", mt: 0.5 }}
          >
            View paper →
          </Link>
        )}
      </Box>
      <Box
        sx={{
          backgroundColor: "grey.900",
          borderRadius: 1,
          p: 2,
          position: "relative",
        }}
      >
        <Tooltip title="Copy citation" placement="top">
          <IconButton
            onClick={handleCopy}
            size="small"
            sx={{
              position: "absolute",
              top: 8,
              right: 8,
              color: "grey.500",
              "&:hover": {
                color: "grey.300",
              },
            }}
          >
            <ContentCopyIcon fontSize="small" />
          </IconButton>
        </Tooltip>
        <Box
          component="pre"
          sx={{
            margin: 0,
            color: "#fff",
            fontSize: "0.875rem",
            fontFamily: "monospace",
            whiteSpace: "pre",
            textAlign: "left",
            overflow: "auto",
          }}
        >
          <code>{citation}</code>
        </Box>
      </Box>
    </Paper>
  );
};

function QuotePage() {
  return (
    <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", py: 4, px: 0 }}>
      <PageHeader
        title="Citation Information"
        subtitle="How to cite the Open LLM Leaderboard in your work"
      />

      <Alert severity="info" sx={{ mb: 4 }}>
        <Typography variant="body2">
          The citations below include both the leaderboard itself and the
          individual benchmarks used in our evaluation suite.
        </Typography>
      </Alert>

      <Box sx={{ mb: 6 }}>
        <Typography variant="h5" sx={{ mb: 3 }}>
          Leaderboard
        </Typography>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {citations.map((citation, index) => (
            <CitationBlock key={index} {...citation} />
          ))}
        </Box>
      </Box>

      <Box sx={{ mb: 6 }}>
        <Typography variant="h5" sx={{ mb: 3 }}>
          Benchmarks
        </Typography>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {benchmarks.map((benchmark, index) => (
            <CitationBlock key={index} {...benchmark} />
          ))}
        </Box>
      </Box>

      <Box>
        <Typography variant="h5" sx={{ mb: 3 }}>
          Prior Work
        </Typography>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {priorWork.map((citation, index) => (
            <CitationBlock key={index} {...citation} />
          ))}
        </Box>
      </Box>
    </Box>
  );
}

export default QuotePage;