@@ -1,6 +1,100 @@
11import React from 'react';
2−import { View } from 'components/View';
2+import { Grid, Flex } from 'indigo-react';
3+import * as ob from 'urbit-ob';
4+
5+import { usePointCursor } from 'store/pointCursor';
6+
7+import View from 'components/View';
8+import Sigil from 'components/Sigil';
9+
10+import * as need from 'lib/need';
11+import { useLocalRouter } from 'lib/LocalRouter';
12+
13+import { composeValidator, buildNumberValidator } from 'form/validators';
14+import BridgeForm from 'form/BridgeForm';
15+import FormError from 'form/FormError';
16+import SubmitButton from 'form/SubmitButton';
17+import { NumberInput, ColorInput } from 'form/Inputs';
18+
19+const BG_COLORS = [
20+ '#000000',
21+ '#C80F34',
22+ '#EE5432',
23+ '#F8C134',
24+ '#286E55',
25+ '#2AA779',
26+ '#2ED196',
27+ '#190D8D',
28+ '#4330FC',
29+ '#6184FF',
30+ '#83C3FF',
31+ '#903AE6',
32+ '#EC6FF7',
33+ '#FFB0D6',
34+];
35+
36+const FG_COLORS = ['#000000', '#FFFFFF'];
337
438export default function SigilGenerator() {
5− return <View></View>;
39+ const { pop, push, names } = useLocalRouter();
40+ const { pointCursor } = usePointCursor();
41+
42+ const validate = composeValidator({ size: buildNumberValidator(16) });
43+ const point = need.point(pointCursor);
44+ const onSubmit = () => {};
45+ return (
46+ <View pop={pop}>
47+ <BridgeForm
48+ validate={validate}
49+ initialValues={{
50+ size: 256,
51+ fgColor: '#FFFFFF',
52+ bgColor: '#000000',
53+ }}
54+ onSubmit={onSubmit}>
55+ {({ handleSubmit, values }) => (
56+ <Grid gap={6}>
57+ <Grid.Item full className="f7">
58+ Sigil
59+ </Grid.Item>
60+ <Grid.Item fourth={1}>
61+ <Sigil
62+ size={50}
63+ patp={ob.patp(point)}
64+ colors={[values.bgColor, values.fgColor]}
65+ />
66+ </Grid.Item>
67+
68+ <Grid.Item full as={Flex} col>
69+ <Flex.Item className="mb1">Urbit ID</Flex.Item>
70+ <Flex.Item className="mono">{ob.patp(point)}</Flex.Item>
71+ </Grid.Item>
72+ <Grid.Item full as={NumberInput} name="size" label="Size (px)" />
73+ <Grid.Item
74+ full
75+ as={ColorInput}
76+ name="bgColor"
77+ label="Background Color"
78+ colors={BG_COLORS}
79+ />
80+ <Grid.Item
81+ full
82+ as={ColorInput}
83+ name="fgColor"
84+ label="Foreground Color"
85+ colors={FG_COLORS}
86+ />
87+ <Grid.Item
88+ full
89+ as={SubmitButton}
90+ handleSubmit={handleSubmit}
91+ accessory="↓">
92+ Download Sigil
93+ </Grid.Item>
94+ <Grid.Item full as={FormError} />
95+ </Grid>
96+ )}
97+ </BridgeForm>
98+ </View>
99+ );
6100}