Hugging Face's logo

Spaces:
fr-gouv-coordination-ia
/
llm_leaderboard_fr
Running on CPU Upgrade

App Files Community
7
llm_leaderboard_fr
File size: 2,307 Bytes 
e7abd9e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
import React from "react";
import { Box, Tooltip, Portal, Backdrop } from "@mui/material";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";

const InfoIconWithTooltip = ({ tooltip, iconProps = {}, sx = {} }) => {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Tooltip
        title={tooltip}
        arrow
        placement="top"
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        componentsProps={{
          tooltip: {
            sx: {
              bgcolor: "rgba(33, 33, 33, 0.95)",
              padding: "12px 16px",
              maxWidth: "none !important",
              width: "auto",
              minWidth: "200px",
              fontSize: "0.875rem",
              lineHeight: 1.5,
              position: "relative",
              zIndex: 1501,
              "& .MuiTooltip-arrow": {
                color: "rgba(33, 33, 33, 0.95)",
              },
            },
          },
          popper: {
            sx: {
              zIndex: 1501,
              maxWidth: "min(600px, 90vw) !important",
              '&[data-popper-placement*="bottom"] .MuiTooltip-tooltip': {
                marginTop: "10px",
              },
              '&[data-popper-placement*="top"] .MuiTooltip-tooltip': {
                marginBottom: "10px",
              },
            },
          },
        }}
      >
        <Box
          component="span"
          sx={{
            opacity: 0.5,
            display: "flex",
            alignItems: "center",
            cursor: "help",
            "&:hover": { opacity: 0.8 },
            position: "relative",
            zIndex: open ? 1502 : "auto",
            ...sx,
          }}
        >
          <InfoOutlinedIcon
            sx={{
              fontSize: "1rem",
              ...iconProps.sx,
            }}
            {...iconProps}
          />
        </Box>
      </Tooltip>
      {open && (
        <Portal>
          <Backdrop
            open={true}
            sx={{
              zIndex: 1500,
              backgroundColor: "rgba(0, 0, 0, 0.5)",
              transition: "opacity 0.2s ease",
              pointerEvents: "none",
            }}
          />
        </Portal>
      )}
    </>
  );
};

export default InfoIconWithTooltip;