git.iko.soy/bridge
on 04765bb help sign in
bridge/src/components/Passport.js
39 lines 1.3 kB history raw
1import React from 'react';
2import * as ob from 'urbit-ob';
3import { Grid, Flex } from 'indigo-react';
4import { times } from 'lodash';
6import usePointBirthday from 'lib/usePointBirthday';
7import { formatDots } from 'lib/dateFormat';
9import Sigil from './Sigil';
10import Blinky, { kLoadingCharacter, kInterstitialCharacter } from './Blinky';
12const buildDate = char =>
13 [4, 2, 2].map(t => times(t, () => char).join('')).join('.');
14const kDateA = buildDate(kLoadingCharacter);
15const kDateB = buildDate(kInterstitialCharacter);
17export default function Passport({ point }) {
18 const birthday = usePointBirthday(point);
19 const birthDate = birthday.matchWith({
20 Nothing: () => <Blinky a={kDateA} b={kDateB} />,
21 Just: p => formatDots(p.value),
22 });
23 const name = ob.patp(point);
25 return (
26 <Grid gap={16} className="bg-black r8 p7">
27 <Grid.Item cols={[1, 4]} className="bg-green">
28 <Sigil patp={name} size={64} margin={0} />
29 </Grid.Item>
30 <Grid.Item as={Flex} cols={[4, 13]} col justify="between">
31 <Flex.Item className="mono white f5">{name}</Flex.Item>
32 <Flex.Item as={Flex} col>
33 <Flex.Item className="mono gray4 f6 uppercase">Birth Time</Flex.Item>
34 <Flex.Item className="mono gray4 f6">{birthDate}</Flex.Item>
35 </Flex.Item>
36 </Grid.Item>
37 </Grid>
38 );