All files / app/features/dashboard/Hero HeroButton.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { StyledEngineProvider, Theme, ThemeProvider } from "@mui/material";
import Button from "components/Button";
import { DASHBOARD } from "i18n/namespaces";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import { searchRoute } from "routes";
import makeStyles from "utils/makeStyles";
 
import useHeroBackgroundTheme from "./useHeroBackgroundTheme";
 
declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}
 
const useStyles = makeStyles((theme) => ({
  textGradient: {
    backgroundColor: "white",
    background: `-webkit-linear-gradient(0deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
    "-webkit-background-clip": "text",
    "-webkit-text-fill-color": "transparent",
  },
  buttonContainer: {
    display: "flex",
    justifyContent: "center",
    margin: theme.spacing(6, 0),
  },
}));
 
export default function HeroButton() {
  const { t } = useTranslation(DASHBOARD);
  const classes = useStyles();
 
  // because this component is over an image background and has a special button, we adjust the theme
  const heroTheme = useHeroBackgroundTheme();
 
  return (
    <div className={classes.buttonContainer}>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={heroTheme}>
          <Link href={searchRoute} passHref legacyBehavior>
            <Button variant="contained" size="large">
              <span className={classes.textGradient}>{t("show_map")}</span>
            </Button>
          </Link>
        </ThemeProvider>
      </StyledEngineProvider>
    </div>
  );
}