Moving to a todo app

components/ui/Card.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 const Card = ({ children, className, ...props }) => (
-  <div {...props} className={classNames('m-auto px-4 py-4 max-w-xl', className)}>
+  <div {...props} className={classNames('max-w-xl', className)}>
     <div className="bg-white shadow-md rounded-b-xl">{children}</div>
   </div>
 );

components/ui/PageStack.jsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+
+const PageStack = ({ children, className, ...props }) => (
+  <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
+    {children}
+  </div>
+);
+
+export default PageStack;

components/ui/TabBar.jsx

@@ -1,12 +1,13 @@
 const TabBar = ({ children }) => (
   <nav
     id="tab-bar"
-    className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50"
+    className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50 z-10"
     style={{
-      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`
-    }}>
+      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`,
+    }}
+  >
     {children}
   </nav>
-)
+);
 
-export default TabBar;
+export default TabBar;

components/ui/Toggle.jsx

@@ -0,0 +1,3 @@
+const Toggle = () => <div></div>;
+
+export default Toggle;

components/ui/VirtualScroll.jsx

@@ -0,0 +1,5 @@
+import { Virtuoso } from 'react-virtuoso';
+
+const VirtualScroll = props => <Virtuoso {...props} />;
+
+export default VirtualScroll;