From 785232b9a38aa96b078aaf7910b1e2b2d4b72d17 Mon Sep 17 00:00:00 2001
From: Stephen DeLorme <stephen@d.elor.me>
Date: Sat, 7 May 2022 13:31:20 -0400
Subject: [PATCH] User invites frontend

---
 frontend/src/App.js                  |  2 ++
 frontend/src/components/InputText.js | 13 +++++++
 frontend/src/index.css               |  4 +++
 frontend/src/routes/Home.js          |  2 +-
 frontend/src/routes/Invite.js        | 53 ++++++++++++++++++++++++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/InputText.js
 create mode 100644 frontend/src/routes/Invite.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index b695a28..85e5708 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -16,6 +16,7 @@ import React from 'react';
 import {ContactsIcon, CrossIcon, GearIcon, MenuIcon} from '@bitcoin-design/bitcoin-icons-react/filled';
 import {ChartSquareBarIcon} from '@heroicons/react/solid';
 import NewFamily from './routes/NewFamily';
+import Invite from './routes/Invite';
 
 const Child = {};
 
@@ -56,6 +57,7 @@ function App() {
 
       <Routes>
         <Route path="onboarding" element={<Onboarding />} />
+        <Route path="invite" element={<Invite />} />
         <Route path="new-family" element={<NewFamily />} />
         <Route path="/" element={<Home />}>
           <Route path="family" element={<Family />}>
diff --git a/frontend/src/components/InputText.js b/frontend/src/components/InputText.js
new file mode 100644
index 0000000..9616215
--- /dev/null
+++ b/frontend/src/components/InputText.js
@@ -0,0 +1,13 @@
+const InputText = ({placeholder, value, type, onChange}) => {
+  return (
+    <input
+      type={type ? type : 'text'}
+      className="w-full p-4 rounded-md font-light text-lg text-black"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  )
+}
+
+export default InputText;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8e131fb..6e36750 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -19,4 +19,8 @@
 
 h1, h2 {
     @apply font-display;
+}
+
+.tile {
+    @apply rounded-lg bg-fam-bg-dark p-8 drop-shadow-lg my-4 border border-fam-teal border-solid space-y-4 flex flex-col;
 }
\ No newline at end of file
diff --git a/frontend/src/routes/Home.js b/frontend/src/routes/Home.js
index ba1cff7..af8323b 100644
--- a/frontend/src/routes/Home.js
+++ b/frontend/src/routes/Home.js
@@ -20,7 +20,7 @@ const Home = () => {
           
           <p className="text-lg">Your tribe has no members. Add&nbsp;one! </p>
           
-          <Link to="/">
+          <Link to="/invite">
             <Button><PlusIcon className="w-8 h-8" /> <span>Add Member</span></Button>
           </Link>
         </div>
diff --git a/frontend/src/routes/Invite.js b/frontend/src/routes/Invite.js
new file mode 100644
index 0000000..007d456
--- /dev/null
+++ b/frontend/src/routes/Invite.js
@@ -0,0 +1,53 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Button from '../components/Button';
+import {MailIcon, PlusIcon} from '@heroicons/react/solid';
+import InputText from '../components/InputText';
+
+const Invite = () => {
+  const [invited, setInvited] = React.useState(false)
+  const [invitedEmail, setInvitedEmail] = React.useState('')
+  
+  return (
+    <div className="min-h-screen">
+      <div className="default-bg"></div>
+      <div className="min-w-screen min-h-screen p-8 flex flex-col justify-center z-10 relative">
+        {!invited ?
+          <div className="tile">
+            <h2>Invite Members</h2>
+
+            <p className="text-lg">Your tribe has no members. Add&nbsp;one! </p>
+
+            <InputText
+              type="email"
+              placeholder="marie@domain.com"
+              value={invitedEmail}
+              onChange={ (e)=>{setInvitedEmail(e.target.value)} }
+            />
+
+            <Button onClick={() => setInvited(true)}>
+              <MailIcon className="w-8 h-8"/> <span>Invite Member</span>
+            </Button>
+          </div>
+        :
+          <div className="tile">
+            <h2>Invite Members</h2>
+
+            <p className="text-lg">
+              <strong>{invitedEmail}</strong> has been invited! Would you like to add another member?
+            </p>
+            
+            <Button onClick={()=>{setInvited(false); setInvitedEmail('');}}>
+              <PlusIcon className="w-8 h-8" /> <span>Invite Another</span>
+            </Button>
+            <Link to="/">
+              <Button style="free">Return to Dashboard</Button>
+            </Link>
+          </div>
+        }
+      </div>
+    </div>
+  );
+};
+
+export default Invite;