Spaces:
Running
Running
File size: 5,138 Bytes
5470817 953a39e 5470817 953a39e 5470817 953a39e bf58a54 953a39e 5470817 953a39e bf58a54 5470817 953a39e 5470817 953a39e 5470817 953a39e 5470817 |
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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
import React, { useState } from "react";
import {
AppBar,
Toolbar,
Box,
Link as MuiLink,
ButtonBase,
Tooltip,
} from "@mui/material";
import { alpha } from "@mui/material/styles";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
import { Link, useLocation } from "react-router-dom";
const Navigation = ({ onToggleTheme, mode }) => {
const [hasChanged, setHasChanged] = useState(false);
const location = useLocation();
const handleThemeToggle = () => {
setHasChanged(true);
onToggleTheme();
};
const iconStyle = {
fontSize: "1.125rem",
...(hasChanged && {
animation: "rotateIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
"@keyframes rotateIn": {
"0%": {
opacity: 0,
transform:
mode === "light"
? "rotate(-90deg) scale(0.8)"
: "rotate(90deg) scale(0.8)",
},
"100%": {
opacity: 1,
transform: "rotate(0) scale(1)",
},
},
}),
};
const linkStyle = (isActive = false) => ({
textDecoration: "none",
color: isActive ? "text.primary" : "text.secondary",
fontSize: "0.8125rem",
opacity: isActive ? 1 : 0.8,
display: "flex",
alignItems: "center",
gap: 0.5,
paddingBottom: "2px",
cursor: "pointer",
position: "relative",
"&:hover": {
opacity: 1,
color: "text.primary",
},
"&::after": isActive
? {
content: '""',
position: "absolute",
bottom: "-4px",
left: "0",
width: "100%",
height: "2px",
backgroundColor: (theme) =>
alpha(
theme.palette.text.primary,
theme.palette.mode === "dark" ? 0.3 : 0.2
),
borderRadius: "2px",
}
: {},
});
const Separator = () => (
<Box
sx={(theme) => ({
width: "4px",
height: "4px",
borderRadius: "100%",
backgroundColor: alpha(
theme.palette.text.primary,
theme.palette.mode === "dark" ? 0.2 : 0.15
),
})}
/>
);
return (
<AppBar
position="static"
elevation={0}
sx={{
backgroundColor: "transparent",
}}
>
<Toolbar sx={{ justifyContent: "center" }}>
<Box
sx={{
display: "flex",
gap: 2.5,
alignItems: "center",
padding: "0.5rem 0",
}}
>
<Box sx={{ display: "flex", gap: 2.5, alignItems: "center" }}>
<Link
to="/"
style={{ textDecoration: "none" }}
sx={linkStyle(location.pathname === "/")}
>
<Box sx={linkStyle(location.pathname === "/")}>Explorer</Box>
</Link>
<Link
to="/submit"
style={{ textDecoration: "none" }}
sx={linkStyle(location.pathname === "/submit")}
>
<Box sx={linkStyle(location.pathname === "/submit")}>
How to submit
</Box>
</Link>
{/*<Separator />
<MuiLink
href="https://huggingface.co/docs/leaderboards/open_llm_leaderboard/about"
target="_blank"
rel="noopener noreferrer"
sx={{
...linkStyle(),
"& svg": {
fontSize: "0.75rem",
ml: 0.5,
opacity: 0.6,
transition: "opacity 0.2s ease-in-out",
},
"&:hover svg": {
opacity: 0.8,
},
}}
>
About
<OpenInNewIcon />
</MuiLink> */}
</Box>
<Separator />
<Tooltip
title={
mode === "light" ? "Switch to dark mode" : "Switch to light mode"
}
>
<ButtonBase
onClick={handleThemeToggle}
sx={(theme) => ({
color: "text.secondary",
borderRadius: "100%",
padding: 0,
width: "36px",
height: "36px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.2s ease-in-out",
"&:hover": {
color: "text.primary",
backgroundColor: alpha(
theme.palette.text.primary,
theme.palette.mode === "dark" ? 0.1 : 0.06
),
},
})}
>
{mode === "light" ? (
<DarkModeOutlinedIcon sx={iconStyle} />
) : (
<LightModeOutlinedIcon sx={iconStyle} />
)}
</ButtonBase>
</Tooltip>
</Box>
</Toolbar>
</AppBar>
);
};
export default Navigation;
|