git.iko.soy/bridge
on 4e06b3a help sign in
bridge/src/components/InviteSigilList.js
52 lines 1.4 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import { Just, Nothing } from 'folktale/maybe';
4import * as ob from 'urbit-ob';
5import { take } from 'lodash';
7import MaybeSigil from 'components/MaybeSigil';
8import WithTooltip from 'components/WithTooltip';
10const InviteSigilList = ({ className, pendingPoints, acceptedPoints }) => {
11 const _acceptedPoints = take(
12 acceptedPoints.getOrElse([]).map(x => Just(ob.patp(x))),
13 6
14 );
16 const _pendingPoints = take(
17 pendingPoints.getOrElse([]).map(x => Just(ob.patp(x))),
18 6 - _acceptedPoints.length
19 );
21 const empty = [
22 ...Array(
23 Math.max(6 - _acceptedPoints.length - _pendingPoints.length, 0)
24 ).keys(),
25 ].map(() => Nothing());
27 const tooltip = point => point.getOrElse(null);
29 const renderSigil = (points, colors, klassName) => {
30 return (
31 <>
32 {points.map((point, idx) => (
33 <div key={idx} className={cn(klassName, 'h9 w9')}>
34 <WithTooltip content={tooltip(point)}>
35 <MaybeSigil patp={point} size={50} colors={colors} />
36 </WithTooltip>
37 </div>
38 ))}
39 </>
40 );
41 };
43 return (
44 <div className={cn('flex justify-between', className)}>
45 {renderSigil(_acceptedPoints, ['#000000', '#FFFFFF'])}
46 {renderSigil(_pendingPoints, ['#ee892b', '#FFFFFF'])}
47 {renderSigil(empty, [], 'b1 b-black b-dashed')}
48 </div>
49 );
50};
52export default InviteSigilList;