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 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 1x 12x 12x 12x 12x 12x 12x 12x 36x | import { useFeatureValue } from "@growthbook/growthbook-react";
import { Replay } from "@mui/icons-material";
import { alpha, Box, Button, ButtonBase, styled, Typography, useMediaQuery } from "@mui/material";
import StyledLink from "components/StyledLink";
import { useTranslation } from "i18n";
import { DASHBOARD } from "i18n/namespaces";
import Link from "next/link";
import { COUCHERS_LOGO_PATHS } from "resources/couchersLogoPaths";
import { theme } from "theme";
import { CELEBRATION_100K_BLOG_URL_FLAG, CELEBRATION_100K_DONATE_URL } from "./constants";
interface CelebrationBannerProps {
onReplay: () => void;
}
const StyledBanner = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
// Longer translations wrap: the buttons move to a second row together instead of overflowing
flexWrap: "wrap",
columnGap: theme.spacing(1),
rowGap: theme.spacing(0.5),
padding: theme.spacing(0.75, 2),
textAlign: "center",
backgroundColor: alpha(theme.palette.primary.main, 0.12),
[theme.breakpoints.down("sm")]: {
columnGap: theme.spacing(0.75),
padding: theme.spacing(0.75, 1.25),
},
}));
const StyledMessage = styled("span")({
minWidth: 0,
});
const StyledCouch = styled("svg")(({ theme }) => ({
height: 15,
flexShrink: 0,
fill: "var(--mui-palette-secondary-main)",
[theme.breakpoints.down("sm")]: {
display: "none",
},
}));
const StyledActions = styled("span")(({ theme }) => ({
display: "inline-flex",
alignItems: "center",
flexShrink: 0,
gap: theme.spacing(1.25),
paddingInlineStart: theme.spacing(1.25),
borderInlineStart: "1px solid var(--mui-palette-divider)",
whiteSpace: "nowrap",
// Phones are the most likely to wrap, where a divider at the start of the second row would look stray
[theme.breakpoints.down("sm")]: {
gap: theme.spacing(0.75),
paddingInlineStart: 0,
borderInlineStart: "none",
},
}));
const StyledReplay = styled(ButtonBase)(({ theme }) => ({
gap: theme.spacing(0.5),
padding: theme.spacing(0.5, 0.25),
borderRadius: theme.shape.borderRadius,
color: "var(--mui-palette-text-secondary)",
...theme.typography.body2,
fontWeight: 500,
"&:hover": {
color: "var(--mui-palette-text-primary)",
},
}));
/** One-row box under the nav during the 100k week, with a replay, a donate button and (once published) a link to the blog post. */
export default function CelebrationBanner({ onReplay }: CelebrationBannerProps) {
const { t } = useTranslation(DASHBOARD);
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const blogUrl = useFeatureValue(CELEBRATION_100K_BLOG_URL_FLAG, "");
return (
<StyledBanner>
<StyledCouch viewBox="0 0 432 293" aria-hidden="true">
{COUCHERS_LOGO_PATHS.map((d) => (
<path key={d} d={d} />
))}
</StyledCouch>
<StyledMessage>
<Typography variant="body2" component="span" sx={{ fontWeight: 500 }}>
{t("celebration_100k.banner_message")}
</Typography>
{blogUrl && (
<>
{" "}
<StyledLink
href={blogUrl}
variant="body2"
underline="always"
sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
>
{t("celebration_100k.banner_read_more_link")}
</StyledLink>
</>
)}
</StyledMessage>
<StyledActions>
<StyledReplay onClick={onReplay} aria-label={t("celebration_100k.banner_replay_button")}>
<Replay fontSize="inherit" />
{!isMobile && t("celebration_100k.banner_replay_button")}
</StyledReplay>
<Button
variant="contained"
size="small"
disableElevation
component={Link}
href={CELEBRATION_100K_DONATE_URL}
sx={{ minWidth: 0, py: 0.5, px: 1.25, borderRadius: 999, fontSize: "0.75rem", lineHeight: 1 }}
>
{t("celebration_100k.help_us_grow_button")}
</Button>
</StyledActions>
</StyledBanner>
);
}
|