Skip to content

Commit

Permalink
Merge pull request #4 from atlantabitdevs/invites
Browse files Browse the repository at this point in the history
User invites frontend
  • Loading branch information
Stephen DeLorme authored May 7, 2022
2 parents b4f5333 + 785232b commit 4eff973
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 1 deletion.
2 changes: 2 additions & 0 deletions frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

Expand Down Expand Up @@ -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 />}>
Expand Down
13 changes: 13 additions & 0 deletions frontend/src/components/InputText.js
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 4 additions & 0 deletions frontend/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion frontend/src/routes/Home.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
53 changes: 53 additions & 0 deletions frontend/src/routes/Invite.js
Original file line number Diff line number Diff line change
@@ -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="[email protected]"
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;

0 comments on commit 4eff973

Please sign in to comment.