1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3import { useRouter } from 'next/router';
4import * as React from 'react';
5
6import { P } from '~/components/base/paragraph';
7
8export const CONTAINER_STYLE = css`
9  background-color: ${theme.background.warning};
10  border: 1px solid ${theme.border.warning};
11  padding: 16px;
12  margin-bottom: 1rem;
13  border-radius: 4px;
14
15  div,
16  p {
17    margin-bottom: 0;
18  }
19`;
20
21export default function VersionedRedirectNotification({ showForQuery = 'redirected' }) {
22  const router = useRouter();
23  const [visible, setVisible] = React.useState(false);
24
25  React.useEffect(() => {
26    if (router.query) {
27      setVisible(router.query.hasOwnProperty(showForQuery));
28    }
29  }, [router.query]);
30
31  if (visible) {
32    return (
33      <div css={CONTAINER_STYLE}>
34        <P>
35          ⚠️ The page you are looking for does not exist in this SDK version. It may have been
36          deprecated or added in a newer SDK version.
37        </P>
38      </div>
39    );
40  }
41
42  return null;
43}
44