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

0% Statements 0/14
100% Branches 0/0
0% Functions 0/2
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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                                                                                                                                                                                   
import { StyledEngineProvider, ThemeProvider, Typography } from "@mui/material";
import classNames from "classnames";
import StyledLink from "components/StyledLink";
import { DASHBOARD } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { routeToEditProfile } from "routes";
import makeStyles from "utils/makeStyles";
 
import useHeroBackgroundTheme from "./useHeroBackgroundTheme";
 
const useStyles = makeStyles((theme) => ({
  linksContainer: {
    display: "flex",
    flexWrap: "wrap",
    rowGap: theme.spacing(2),
    columnGap: theme.spacing(4),
    justifyContent: "center",
    margin: theme.spacing(4, 0),
  },
  tabAppearance: {
    position: "relative",
    paddingBottom: theme.spacing(1),
    "&::after": {
      content: '""',
      position: "absolute",
      bottom: 0,
      left: "50%",
      transform: "translateX(-50%)",
      width: 40,
      height: 2,
      background: theme.palette.common.white,
      transition: `opacity ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
      opacity: 0,
    },
    "&:hover::after": {
      opacity: 1,
    },
  },
  selectedTabAppearance: {
    "&::after": {
      opacity: 1,
    },
  },
}));
 
export default function HeroLinks() {
  const { t } = useTranslation(DASHBOARD);
  const classes = useStyles();
 
  // because this component is over an image background, we need to use a theme that overrides some styles
  const imageOverlayTheme = useHeroBackgroundTheme();
 
  return (
    <>
      <div className={classes.linksContainer}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={imageOverlayTheme}>
            <Typography
              color="textPrimary"
              variant="body1"
              className={classNames(
                classes.tabAppearance,
                classes.selectedTabAppearance,
              )}
            >
              {t("find_a_host")}
            </Typography>
 
            <StyledLink
              underline="none"
              href={routeToEditProfile("home")}
              className={classes.tabAppearance}
            >
              {t("become_a_host")}
            </StyledLink>
 
            <StyledLink
              underline="none"
              href="/communities"
              className={classes.tabAppearance}
            >
              {t("browse_communities")}
            </StyledLink>
          </ThemeProvider>
        </StyledEngineProvider>
      </div>
    </>
  );
}