feat: empty state graphic

src/components/LayoutCenter/LayoutCenter.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { makeStyles } from "@fluentui/react-components";
+import { TabBar } from "./TabBar/TabBar";
+import { EmptyState } from "./EmptyState/EmptyState";
+import { isMobileAgent } from "./constants";
+
+const isMobile = isMobileAgent.test(navigator.userAgent);
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    height: '100vh',
+    'flex-direction': isMobile ? 'column-reverse' : 'column',
+  },
+  page: {
+    height: 'calc(100vh - 60px)',
+    'box-sizing': 'content-box',
+  }
+});
+
+export const LayoutCenter = () => {
+  const styles = useStyles();
+  const searchParams = new URLSearchParams(document?.location?.search);
+  return (
+    <div className={styles.root}>
+      <TabBar initialValue={searchParams.get("p")} />
+      <div className={styles.page}>
+        <EmptyState />
+      </div>
+    </div>
+  );
+}
+
+export default LayoutCenter