diff --git a/apps/client/src/common/components/state/EmptyPage.module.scss b/apps/client/src/common/components/state/EmptyPage.module.scss new file mode 100644 index 000000000..b3dea3ab5 --- /dev/null +++ b/apps/client/src/common/components/state/EmptyPage.module.scss @@ -0,0 +1,20 @@ +@use '../../../theme/viewerDefs' as *; + +/* share the same style as a page layout */ +.page { + margin: 0; + box-sizing: border-box; /* reset */ + overflow: hidden; + width: 100%; /* restrict the page width to viewport */ + height: 100vh; + + font-family: var(--font-family-override, $viewer-font-family); + background: var(--background-color-override, $viewer-background-color); + color: var(--color-override, $viewer-color); + padding: min(2vh, 16px) clamp(16px, 10vw, 64px); + + display: flex; + flex-direction: column; + align-items: center; + padding-top: 5rem; +} diff --git a/apps/client/src/common/components/state/EmptyPage.tsx b/apps/client/src/common/components/state/EmptyPage.tsx new file mode 100644 index 000000000..4bfc3f37e --- /dev/null +++ b/apps/client/src/common/components/state/EmptyPage.tsx @@ -0,0 +1,20 @@ +import { CSSProperties } from 'react'; + +import Empty from './Empty'; + +import style from './EmptyPage.module.scss'; + +interface EmptyPageProps { + text?: string; + style?: CSSProperties; +} + +export default function EmptyPage(props: EmptyPageProps) { + const { text, ...rest } = props; + + return ( +