Settings and notifications

components/pages/Settings.jsx

@@ -1,9 +1,32 @@
+import Store from '../../store';
+import * as selectors from '../../store/selectors';
+import * as actions from '../../store/actions';
+
 import Content from '../ui/Content';
+import List from '../ui/List';
+import ListItem from '../ui/ListItem';
+import Toggle from '../ui/Toggle';
 
 const Settings = ({ selected }) => {
+  const enableNotifications = Store.useState();
+  const settings = Store.useState(selectors.getSettings);
+
   return (
     <Content visible={selected} className="p-4">
-      <h2>Settings</h2>
+      <List>
+        <ListItem className="flex">
+          <span className="text-md flex-1">Enable Notifications</span>
+          <Toggle
+            checked={settings.enableNotifications}
+            onChange={e =>
+              actions.setSettings({
+                ...settings,
+                enableNotifications: e.target.checked,
+              })
+            }
+          />
+        </ListItem>
+      </List>
     </Content>
   );
 };

components/ui/PageStack.jsx

@@ -1,8 +1,36 @@
 import classNames from 'classnames';
 
+import { Transition } from 'react-transition-group';
+
+const duration = 500;
+
+const defaultStyle = {
+  transition: `opacity ${duration}ms ease-in-out`,
+  opacity: 0,
+};
+
+const transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+};
+
 const PageStack = ({ children, className, ...props }) => (
   <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
-    {children}
+    <Transition in={true} duration={duration}>
+      {state => (
+        <div
+          className="w-full h-full"
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </Transition>
   </div>
 );
 

components/ui/Toggle.jsx

@@ -1,3 +1,5 @@
-const Toggle = () => <div></div>;
+import ReactToggle from 'react-toggle';
+
+const Toggle = props => <ReactToggle {...props} icons={false} />;
 
 export default Toggle;