lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
POC
danabra.mov
+117
-133
+117
-133
sdui/server/src/App.js
+117
-133
sdui/server/src/App.js
···
1
1
import * as React from 'react'
2
2
3
-
import {Label, Stack} from './client.js'
3
+
import {
4
+
ActorLabel,
5
+
Avatar,
6
+
Box,
7
+
Embed,
8
+
Expandable,
9
+
Label,
10
+
Stack,
11
+
Tabs,
12
+
} from './client.js'
4
13
5
14
export default async function App() {
6
15
return (
7
16
<Stack gap={10}>
8
17
<Label size={36} lineHeight={1.2} weight="bold" text="Hello, world!" />
18
+
<Label
19
+
lineHeight={1.2}
20
+
text='This is the initial version of a fantastic new feature of the AT Protocol called "application components."'
21
+
/>
22
+
<Tabs labels={['Layout', 'Display', 'Inputs', 'Forms', 'ATProto']}>
23
+
<Stack gap={10} pad={{t: 20}}>
24
+
<Box pad={{x: 10}}>
25
+
<Label text="Stack" size={10} weight="bold" />
26
+
</Box>
27
+
<Box border="default" corner={10} pad={{x: 2, y: 6}}>
28
+
<Stack direction="row" align="center" gap={10} pad={{x: 10}}>
29
+
<Label text="One" />
30
+
<Label text="Two" color="positive" />
31
+
<Box border="default" corner={4} pad={10}>
32
+
<Label text="Three" />
33
+
</Box>
34
+
<Box background="secondary" corner={4} pad={10}>
35
+
<Label text="Four" />
36
+
</Box>
37
+
<Label text="Five" color="secondary" />
38
+
</Stack>
39
+
</Box>
40
+
<Box pad={{x: 10}}>
41
+
<Label text="Box" size={10} weight="bold" />
42
+
</Box>
43
+
<Box border="default" corner={10} pad={{x: 10, y: 14}}>
44
+
<Label text="You can use the Box element as somewhat similar to a div." />
45
+
<Label text="Its children flow vertically with no gap." />
46
+
<Label text="What it offers is styling -- border, corner radius, background, and padding." />
47
+
<Label text="If you want to control layout then you use a Stack, then if you want styling you use a Box." />
48
+
<Label text="Boxes also make good neutral containers." />
49
+
</Box>
50
+
<Box pad={{x: 10}}>
51
+
<Label text="Expandable" size={10} weight="bold" />
52
+
</Box>
53
+
<Box border="default" corner={10} pad={6}>
54
+
<Expandable label="Expandable">
55
+
<Label text="Content" />
56
+
</Expandable>
57
+
</Box>
58
+
</Stack>
59
+
<Label text="Display TODO" />
60
+
<Label text="Inputs TODO" />
61
+
<Label text="Forms TODO" />
62
+
<Stack gap={10} pad={{t: 20}}>
63
+
<Box pad={{x: 10}}>
64
+
<Label text="Avatar" size={10} weight="bold" />
65
+
</Box>
66
+
<Box border="secondary" corner={8} pad={{x: 16, y: 12}}>
67
+
<Stack direction="row" gap={10}>
68
+
<Avatar uri="bsky.app" />
69
+
<Avatar uri="at://atproto.com" />
70
+
<Avatar uri="at://pfrazee.com/" />
71
+
</Stack>
72
+
</Box>
73
+
<Box pad={{x: 10}}>
74
+
<Label text="ActorLabel" size={10} weight="bold" />
75
+
</Box>
76
+
<Box border="secondary" corner={8} pad={{x: 16, y: 12}}>
77
+
<Stack gap={10}>
78
+
<Stack direction="row" gap={8}>
79
+
<Label weight="bold" text="Display Name:" />
80
+
<ActorLabel uri="bsky.app" field="displayName" />
81
+
</Stack>
82
+
<Stack direction="row" gap={8}>
83
+
<Label weight="bold" text="Handle:" />
84
+
<ActorLabel uri="bsky.app" field="handle" />
85
+
</Stack>
86
+
<Stack direction="row" gap={8}>
87
+
<Label weight="bold" text="Description:" />
88
+
<ActorLabel uri="bsky.app" field="description" />
89
+
</Stack>
90
+
</Stack>
91
+
</Box>
92
+
<Box pad={{x: 10}}>
93
+
<Label text="Embed (Actor)" size={10} weight="bold" />
94
+
</Box>
95
+
<Box border="secondary" corner={8}>
96
+
<Embed uri="bsky.app" />
97
+
</Box>
98
+
<Box border="secondary" corner={8}>
99
+
<Embed uri="at://atproto.com/" />
100
+
</Box>
101
+
<Box border="secondary" corner={8}>
102
+
<Embed uri="at://pfrazee.com" />
103
+
</Box>
104
+
<Box pad={{x: 10}}>
105
+
<Label text="Embed (Post)" size={10} weight="bold" />
106
+
</Box>
107
+
<Box border="secondary" corner={8}>
108
+
<Embed uri="at://pfrazee.com/app.bsky.feed.post/3ku7fbojcqs25" />
109
+
</Box>
110
+
<Box border="secondary" corner={8}>
111
+
<Embed uri="at://bsky.app/app.bsky.feed.post/3ku73zs755e27" />
112
+
</Box>
113
+
<Box pad={{x: 10}}>
114
+
<Label
115
+
text="Embed (Unsupported record type)"
116
+
size={10}
117
+
weight="bold"
118
+
/>
119
+
</Box>
120
+
<Box border="secondary" corner={8}>
121
+
<Embed uri="at://pfrazee.com/com.example.unknown/123" />
122
+
</Box>
123
+
</Stack>
124
+
</Tabs>
9
125
</Stack>
10
126
)
11
127
}
12
-
13
-
// TODO
14
-
// const DEFAULT_AC = h('Stack', {gap: 10}, [
15
-
// h('Label', {
16
-
// size: 36,
17
-
// lineHeight: 1.2,
18
-
// weight: 'bold',
19
-
// text: 'Hello, world!',
20
-
// }),
21
-
// h('Label', {
22
-
// lineHeight: 1.2,
23
-
// text: 'This is the initial version of a fantastic new feature of the AT Protocol called "application components."',
24
-
// }),
25
-
// h('Tabs', {labels: ['Layout', 'Display', 'Inputs', 'Forms', 'ATProto']}, [
26
-
// h('Stack', {gap: 10, pad: {t: 20}}, [
27
-
// h('Box', {pad: {x: 10}}, [
28
-
// h('Label', {text: 'Stack', size: 10, weight: 'bold'}),
29
-
// ]),
30
-
// h('Box', {border: 'default', corner: 10, pad: {x: 2, y: 6}}, [
31
-
// h(
32
-
// 'Stack',
33
-
// {
34
-
// direction: 'row',
35
-
// align: 'center',
36
-
// gap: 10,
37
-
// pad: {x: 10},
38
-
// },
39
-
// [
40
-
// h('Label', {text: 'One'}),
41
-
// h('Label', {text: 'Two', color: 'positive'}),
42
-
// h('Box', {border: 'default', corner: 4, pad: 10}, [
43
-
// {type: 'Label', props: {text: 'Three'}},
44
-
// ]),
45
-
// h('Box', {background: 'secondary', corner: 4, pad: 10}, [
46
-
// {type: 'Label', props: {text: 'Four'}},
47
-
// ]),
48
-
// h('Label', {text: 'Five', color: 'secondary'}),
49
-
// ],
50
-
// ),
51
-
// ]),
52
-
// h('Box', {pad: {x: 10}}, [
53
-
// h('Label', {text: 'Box', size: 10, weight: 'bold'}),
54
-
// ]),
55
-
// h('Box', {border: 'default', corner: 10, pad: {x: 10, y: 14}}, [
56
-
// h('Label', {
57
-
// text: 'You can use the Box element as somewhat similar to a div.',
58
-
// }),
59
-
// h('Label', {text: 'Its children flow vertically with no gap.'}),
60
-
// h('Label', {
61
-
// text: 'What it offers is styling -- border, corner radius, background, and padding.',
62
-
// }),
63
-
// h('Label', {
64
-
// text: 'If you want to control layout then you use a Stack, then if you want styling you use a Box.',
65
-
// }),
66
-
// h('Label', {
67
-
// text: 'Boxes also make good neutral containers.',
68
-
// }),
69
-
// ]),
70
-
// h('Box', {pad: {x: 10}}, [
71
-
// h('Label', {text: 'Expandable', size: 10, weight: 'bold'}),
72
-
// ]),
73
-
// h('Box', {border: 'default', corner: 10, pad: 6}, [
74
-
// h('Expandable', {label: 'Expandable'}, [h('Label', {text: 'Content'})]),
75
-
// ]),
76
-
// ]),
77
-
// h('Label', {text: 'Display TODO'}),
78
-
// h('Label', {text: 'Inputs TODO'}),
79
-
// h('Label', {text: 'Forms TODO'}),
80
-
// h('Stack', {gap: 10, pad: {t: 20}}, [
81
-
// h('Box', {pad: {x: 10}}, [
82
-
// h('Label', {text: 'Avatar', size: 10, weight: 'bold'}),
83
-
// ]),
84
-
// h('Box', {border: 'secondary', corner: 8, pad: {x: 16, y: 12}}, [
85
-
// h('Stack', {direction: 'row', gap: 10}, [
86
-
// h('Avatar', {uri: 'bsky.app'}),
87
-
// h('Avatar', {uri: 'at://atproto.com'}),
88
-
// h('Avatar', {uri: 'at://pfrazee.com/'}),
89
-
// ]),
90
-
// ]),
91
-
// h('Box', {pad: {x: 10}}, [
92
-
// h('Label', {text: 'ActorLabel', size: 10, weight: 'bold'}),
93
-
// ]),
94
-
// h('Box', {border: 'secondary', corner: 8, pad: {x: 16, y: 12}}, [
95
-
// h('Stack', {gap: 10}, [
96
-
// h('Stack', {direction: 'row', gap: 8}, [
97
-
// h('Label', {weight: 'bold', text: 'Display Name:'}),
98
-
// h('ActorLabel', {uri: 'bsky.app', field: 'displayName'}),
99
-
// ]),
100
-
// h('Stack', {direction: 'row', gap: 8}, [
101
-
// h('Label', {weight: 'bold', text: 'Handle:'}),
102
-
// h('ActorLabel', {uri: 'bsky.app', field: 'handle'}),
103
-
// ]),
104
-
// h('Stack', {direction: 'row', gap: 8}, [
105
-
// h('Label', {weight: 'bold', text: 'Description:'}),
106
-
// h('ActorLabel', {uri: 'bsky.app', field: 'description'}),
107
-
// ]),
108
-
// ]),
109
-
// ]),
110
-
// h('Box', {pad: {x: 10}}, [
111
-
// h('Label', {text: 'Embed (Actor)', size: 10, weight: 'bold'}),
112
-
// ]),
113
-
// h('Box', {border: 'secondary', corner: 8}, [
114
-
// h('Embed', {uri: 'bsky.app'}),
115
-
// ]),
116
-
// h('Box', {border: 'secondary', corner: 8}, [
117
-
// h('Embed', {uri: 'at://atproto.com/'}),
118
-
// ]),
119
-
// h('Box', {border: 'secondary', corner: 8}, [
120
-
// h('Embed', {uri: 'at://pfrazee.com'}),
121
-
// ]),
122
-
// h('Box', {pad: {x: 10}}, [
123
-
// h('Label', {text: 'Embed (Post)', size: 10, weight: 'bold'}),
124
-
// ]),
125
-
// h('Box', {border: 'secondary', corner: 8}, [
126
-
// h('Embed', {uri: 'at://pfrazee.com/app.bsky.feed.post/3ku7fbojcqs25'}),
127
-
// ]),
128
-
// h('Box', {border: 'secondary', corner: 8}, [
129
-
// h('Embed', {uri: 'at://bsky.app/app.bsky.feed.post/3ku73zs755e27'}),
130
-
// ]),
131
-
// h('Box', {pad: {x: 10}}, [
132
-
// h('Label', {
133
-
// text: 'Embed (Unsupported record type)',
134
-
// size: 10,
135
-
// weight: 'bold',
136
-
// }),
137
-
// ]),
138
-
// h('Box', {border: 'secondary', corner: 8}, [
139
-
// h('Embed', {uri: 'at://pfrazee.com/com.example.unknown/123'}),
140
-
// ]),
141
-
// ]),
142
-
// ]),
143
-
// ])