- building the base modal trigger architecture

src/modals/AuthModal.js

@@ -0,0 +1,20 @@
+import React from "react";
+import BaseModal from "./BaseModal";
+import Button from "../components/shared/Button";
+
+const AuthModal = ({ state }) => {
+  return (
+    <BaseModal state={state} title="Who are you?" action={action}>
+      <p>
+        Reactive Resume needs to know who you are so it can securely
+        authenticate you into the app and show you only your information. Once
+        you are in, you can start building your resume, editing it to add new
+        skills or sharing it with the world!
+      </p>
+    </BaseModal>
+  );
+};
+
+const action = <Button title="Sign in with Google" />;
+
+export default AuthModal;

src/modals/BaseModal.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import { MdClose } from "react-icons/md";
+import styles from "./BaseModal.module.css";
+import Button from "../components/shared/Button";
+
+const BaseModal = ({ title, state, children, action }) => {
+  const [isOpen, setOpen] = state;
+
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Modal open={isOpen} onClose={handleClose} className={styles.root}>
+      <div className={styles.modal}>
+        <div className={styles.title}>
+          <h2>{title}</h2>
+          <MdClose size="18" onClick={handleClose} />
+        </div>
+
+        <div className={styles.body}>{children}</div>
+
+        <div className={styles.actions}>
+          <Button
+            outline
+            title="Cancel"
+            className="mr-8"
+            onClick={handleClose}
+          />
+
+          {action}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default BaseModal;

src/modals/BaseModal.module.css

@@ -0,0 +1,28 @@
+.root {
+  @apply flex items-center justify-center;
+}
+
+.modal {
+  width: min(600px, calc(100vw - 100px));
+  @apply p-8 rounded bg-white outline-none;
+}
+
+.modal .title {
+  @apply flex items-center justify-between;
+}
+
+.modal .title h2 {
+  @apply text-3xl;
+}
+
+.modal .title svg {
+  @apply cursor-pointer;
+}
+
+.modal .body {
+  @apply my-8;
+}
+
+.modal .actions {
+  @apply flex justify-end;
+}