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 | import {
Link as MuiLink,
styled,
StyledEngineProvider,
ThemeProvider,
Typography,
} from "@mui/material";
import { Trans } from "next-i18next";
import { theme } from "theme";
import useHeroBackgroundTheme from "./useHeroBackgroundTheme";
const StyledAttribution = styled(Typography)(() => ({
position: "absolute",
bottom: 0,
right: 0,
zIndex: 1,
background: theme.palette.action.active,
padding: theme.spacing(0, 1),
opacity: 0.5,
transition: `opacity ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
"&:hover": {
opacity: 1,
},
}));
// photo URL: https://unsplash.com/phouiLink>tos/eOcyhe5-9sQ?
const authorUrl =
"https://unsplash.com/@directormesut?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText";
const unsplashUrl =
"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText";
export default function HeroImageAttribution() {
// because this component is over an image background, we need to use a theme that overrides some styles
const heroBackgroundTheme = useHeroBackgroundTheme();
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={heroBackgroundTheme}>
<StyledAttribution color="textPrimary" variant="body2">
<Trans i18nKey="dashboard:hero_image_attribution">
{`Photo by `}
<MuiLink
href={authorUrl}
variant="inherit"
rel="noreferrer noopener"
target="_blank"
underline="hover"
>
Mesut Kaya
</MuiLink>
{` on `}
<MuiLink
href={unsplashUrl}
variant="inherit"
rel="noreferrer noopener"
target="_blank"
underline="hover"
>
Unsplash
</MuiLink>
</Trans>
</StyledAttribution>
</ThemeProvider>
</StyledEngineProvider>
);
}
|