src/components/InviteSigilList.jsx · bridge

on master help sign in

bridge/src/components/InviteSigilList.jsx

50 lines 1.3 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';

9const InviteSigilList = ({ className, pendingPoints, acceptedPoints }) => {

10 const _acceptedPoints = take(

11 acceptedPoints.getOrElse([]).map(x => Just(ob.patp(x))),

12 6

13 );

15 const _pendingPoints = take(

16 pendingPoints.getOrElse([]).map(x => Just(ob.patp(x))),

17 6 - _acceptedPoints.length

18 );

20 const empty = [

21 ...Array(

22 Math.max(6 - _acceptedPoints.length - _pendingPoints.length, 0)

23 ).keys(),

24 ].map(() => Nothing());

26 const renderSigil = (points, colors, klassName) => {

27 return (

28 <>

29 {points.map((point, idx) => (

30 <div

31 key={idx}

32 title={point.getOrElse(null)}

33 className={cn(klassName, 'h9 w9')}>

34 <MaybeSigil patp={point} size={50} colors={colors} />

35 </div>

36 ))}

37 </>

38 );

39 };

41 return (

42 <div className={cn('flex justify-between', className)}>

43 {renderSigil(_acceptedPoints, ['#000000', '#FFFFFF'])}

44 {renderSigil(_pendingPoints, ['#ee892b', '#FFFFFF'])}

45 {renderSigil(empty, [], 'b1 b-gray3 b-dashed')}

46 </div>

47 );

50export default InviteSigilList;