on 42e34eb help sign in
bridge/src/views/Point/InviteForm.tsx
92 lines 2.4 kB history raw
1import cn from 'classnames';
2import BarGraph from 'components/BarGraph';
3import Chip from 'components/Chip';
4import InviteSigilList from 'components/InviteSigilList';
5import { Grid, Flex } from 'indigo-react';
6import { Button } from '@tlon/indigo-react';
7import Inviter from 'views/Invite/Inviter';
9export const InviteForm = ({
10 showInviteForm,
11 setShowInviteForm,
12 acceptedInvites,
13 acceptedPoints,
14 availableInvites,
15 goCohort,
16 pendingPoints,
17 sentInvites,
18 showInvites,
19}) => {
20 const _totalInvites =
21 sentInvites.getOrElse(0) + availableInvites.getOrElse(0);
22 const _pendingInvites = pendingPoints.getOrElse([]).length;
24 return (
25 <>
26 <Grid.Item cols={[1, 11]}>
27 Invite Group
28 <br />
29 </Grid.Item>
31 <Grid.Item
32 className={cn('t-right underline pointer-hover', {
33 gray4: sentInvites.getOrElse(0) === 0,
34 })}
35 onClick={goCohort}
36 cols={[11, 13]}>
37 View
38 </Grid.Item>
39 <Grid.Item full>
40 <Flex align="center">
41 <Flex.Item>
42 {acceptedInvites.getOrElse(0)} / {_totalInvites}
43 </Flex.Item>
44 {_pendingInvites > 0 && (
45 <Flex.Item as={Chip} className="bg-yellow1 yellow4">
46 {_pendingInvites} pending
47 </Flex.Item>
48 )}
49 </Flex>
50 </Grid.Item>
52 {showInvites && (
53 <>
54 <Grid.Item
55 full
56 as={BarGraph}
57 available={availableInvites}
58 sent={sentInvites}
59 accepted={acceptedInvites}
60 />
61 <Grid.Item
62 full
63 as={InviteSigilList}
64 pendingPoints={pendingPoints}
65 acceptedPoints={acceptedPoints}
66 />
67 </>
68 )}
69 {!showInvites && (
70 <>
71 <Grid.Item full className="b-gray4 b-dotted b1 self-center">
72 <div className="p4 pv8 t-center gray4">
73 Start your invite group by adding members
74 </div>
75 </Grid.Item>
76 </>
77 )}
78 {!showInviteForm && availableInvites.getOrElse(0) > 0 && (
79 <Grid.Item
80 full
81 solid
82 as={Button}
83 center
84 onClick={() => setShowInviteForm(true)}>
85 Add Members
86 </Grid.Item>
87 )}
88 {showInviteForm && <Inviter />}
89 <Grid.Item full className="mb2" />
90 </>
91 );
92};