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 | import {
Chip,
keyframes,
styled,
useMediaQuery,
useTheme,
} from "@mui/material";
import React, { useState } from "react";
// Define the keyframes animation
const attention = keyframes`
from {
opacity: 0.5;
}
to {
opacity: 0.9;
}
`;
const Banner = styled(Chip)(({ theme }) => ({
animation: `${attention} 2s infinite alternate`,
position: "fixed",
bottom: theme.spacing(12),
right: theme.spacing(1),
zIndex: 5000,
backgroundColor: theme.palette.error.main,
color: theme.palette.common.white,
}));
export function EnvironmentBanner() {
const theme = useTheme();
const isBelowSm = useMediaQuery(theme.breakpoints.down("md"));
const [isShown, setIsShown] = useState(
process.env.NEXT_PUBLIC_COUCHERS_ENV !== "prod"
);
return isShown ? (
<Banner
label={`This is a preview build of the app.${
!isBelowSm ? " It uses a separate database to the production app." : ""
}`}
onDelete={() => setIsShown(false)}
/>
) : null;
}
|