POC
This commit is contained in:
Dan Abramov
+117
-133
@@ -1,143 +1,127 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import {Label, Stack} from './client.js'
|
||||
import {
|
||||
ActorLabel,
|
||||
Avatar,
|
||||
Box,
|
||||
Embed,
|
||||
Expandable,
|
||||
Label,
|
||||
Stack,
|
||||
Tabs,
|
||||
} from './client.js'
|
||||
|
||||
export default async function App() {
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<Label size={36} lineHeight={1.2} weight="bold" text="Hello, world!" />
|
||||
<Label
|
||||
lineHeight={1.2}
|
||||
text='This is the initial version of a fantastic new feature of the AT Protocol called "application components."'
|
||||
/>
|
||||
<Tabs labels={['Layout', 'Display', 'Inputs', 'Forms', 'ATProto']}>
|
||||
<Stack gap={10} pad={{t: 20}}>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="Stack" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="default" corner={10} pad={{x: 2, y: 6}}>
|
||||
<Stack direction="row" align="center" gap={10} pad={{x: 10}}>
|
||||
<Label text="One" />
|
||||
<Label text="Two" color="positive" />
|
||||
<Box border="default" corner={4} pad={10}>
|
||||
<Label text="Three" />
|
||||
</Box>
|
||||
<Box background="secondary" corner={4} pad={10}>
|
||||
<Label text="Four" />
|
||||
</Box>
|
||||
<Label text="Five" color="secondary" />
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="Box" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="default" corner={10} pad={{x: 10, y: 14}}>
|
||||
<Label text="You can use the Box element as somewhat similar to a div." />
|
||||
<Label text="Its children flow vertically with no gap." />
|
||||
<Label text="What it offers is styling -- border, corner radius, background, and padding." />
|
||||
<Label text="If you want to control layout then you use a Stack, then if you want styling you use a Box." />
|
||||
<Label text="Boxes also make good neutral containers." />
|
||||
</Box>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="Expandable" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="default" corner={10} pad={6}>
|
||||
<Expandable label="Expandable">
|
||||
<Label text="Content" />
|
||||
</Expandable>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Label text="Display TODO" />
|
||||
<Label text="Inputs TODO" />
|
||||
<Label text="Forms TODO" />
|
||||
<Stack gap={10} pad={{t: 20}}>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="Avatar" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8} pad={{x: 16, y: 12}}>
|
||||
<Stack direction="row" gap={10}>
|
||||
<Avatar uri="bsky.app" />
|
||||
<Avatar uri="at://atproto.com" />
|
||||
<Avatar uri="at://pfrazee.com/" />
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="ActorLabel" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8} pad={{x: 16, y: 12}}>
|
||||
<Stack gap={10}>
|
||||
<Stack direction="row" gap={8}>
|
||||
<Label weight="bold" text="Display Name:" />
|
||||
<ActorLabel uri="bsky.app" field="displayName" />
|
||||
</Stack>
|
||||
<Stack direction="row" gap={8}>
|
||||
<Label weight="bold" text="Handle:" />
|
||||
<ActorLabel uri="bsky.app" field="handle" />
|
||||
</Stack>
|
||||
<Stack direction="row" gap={8}>
|
||||
<Label weight="bold" text="Description:" />
|
||||
<ActorLabel uri="bsky.app" field="description" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="Embed (Actor)" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8}>
|
||||
<Embed uri="bsky.app" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8}>
|
||||
<Embed uri="at://atproto.com/" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8}>
|
||||
<Embed uri="at://pfrazee.com" />
|
||||
</Box>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label text="Embed (Post)" size={10} weight="bold" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8}>
|
||||
<Embed uri="at://pfrazee.com/app.bsky.feed.post/3ku7fbojcqs25" />
|
||||
</Box>
|
||||
<Box border="secondary" corner={8}>
|
||||
<Embed uri="at://bsky.app/app.bsky.feed.post/3ku73zs755e27" />
|
||||
</Box>
|
||||
<Box pad={{x: 10}}>
|
||||
<Label
|
||||
text="Embed (Unsupported record type)"
|
||||
size={10}
|
||||
weight="bold"
|
||||
/>
|
||||
</Box>
|
||||
<Box border="secondary" corner={8}>
|
||||
<Embed uri="at://pfrazee.com/com.example.unknown/123" />
|
||||
</Box>
|
||||
</Stack>
|
||||
</Tabs>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
// TODO
|
||||
// const DEFAULT_AC = h('Stack', {gap: 10}, [
|
||||
// h('Label', {
|
||||
// size: 36,
|
||||
// lineHeight: 1.2,
|
||||
// weight: 'bold',
|
||||
// text: 'Hello, world!',
|
||||
// }),
|
||||
// h('Label', {
|
||||
// lineHeight: 1.2,
|
||||
// text: 'This is the initial version of a fantastic new feature of the AT Protocol called "application components."',
|
||||
// }),
|
||||
// h('Tabs', {labels: ['Layout', 'Display', 'Inputs', 'Forms', 'ATProto']}, [
|
||||
// h('Stack', {gap: 10, pad: {t: 20}}, [
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'Stack', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'default', corner: 10, pad: {x: 2, y: 6}}, [
|
||||
// h(
|
||||
// 'Stack',
|
||||
// {
|
||||
// direction: 'row',
|
||||
// align: 'center',
|
||||
// gap: 10,
|
||||
// pad: {x: 10},
|
||||
// },
|
||||
// [
|
||||
// h('Label', {text: 'One'}),
|
||||
// h('Label', {text: 'Two', color: 'positive'}),
|
||||
// h('Box', {border: 'default', corner: 4, pad: 10}, [
|
||||
// {type: 'Label', props: {text: 'Three'}},
|
||||
// ]),
|
||||
// h('Box', {background: 'secondary', corner: 4, pad: 10}, [
|
||||
// {type: 'Label', props: {text: 'Four'}},
|
||||
// ]),
|
||||
// h('Label', {text: 'Five', color: 'secondary'}),
|
||||
// ],
|
||||
// ),
|
||||
// ]),
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'Box', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'default', corner: 10, pad: {x: 10, y: 14}}, [
|
||||
// h('Label', {
|
||||
// text: 'You can use the Box element as somewhat similar to a div.',
|
||||
// }),
|
||||
// h('Label', {text: 'Its children flow vertically with no gap.'}),
|
||||
// h('Label', {
|
||||
// text: 'What it offers is styling -- border, corner radius, background, and padding.',
|
||||
// }),
|
||||
// h('Label', {
|
||||
// text: 'If you want to control layout then you use a Stack, then if you want styling you use a Box.',
|
||||
// }),
|
||||
// h('Label', {
|
||||
// text: 'Boxes also make good neutral containers.',
|
||||
// }),
|
||||
// ]),
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'Expandable', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'default', corner: 10, pad: 6}, [
|
||||
// h('Expandable', {label: 'Expandable'}, [h('Label', {text: 'Content'})]),
|
||||
// ]),
|
||||
// ]),
|
||||
// h('Label', {text: 'Display TODO'}),
|
||||
// h('Label', {text: 'Inputs TODO'}),
|
||||
// h('Label', {text: 'Forms TODO'}),
|
||||
// h('Stack', {gap: 10, pad: {t: 20}}, [
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'Avatar', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8, pad: {x: 16, y: 12}}, [
|
||||
// h('Stack', {direction: 'row', gap: 10}, [
|
||||
// h('Avatar', {uri: 'bsky.app'}),
|
||||
// h('Avatar', {uri: 'at://atproto.com'}),
|
||||
// h('Avatar', {uri: 'at://pfrazee.com/'}),
|
||||
// ]),
|
||||
// ]),
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'ActorLabel', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8, pad: {x: 16, y: 12}}, [
|
||||
// h('Stack', {gap: 10}, [
|
||||
// h('Stack', {direction: 'row', gap: 8}, [
|
||||
// h('Label', {weight: 'bold', text: 'Display Name:'}),
|
||||
// h('ActorLabel', {uri: 'bsky.app', field: 'displayName'}),
|
||||
// ]),
|
||||
// h('Stack', {direction: 'row', gap: 8}, [
|
||||
// h('Label', {weight: 'bold', text: 'Handle:'}),
|
||||
// h('ActorLabel', {uri: 'bsky.app', field: 'handle'}),
|
||||
// ]),
|
||||
// h('Stack', {direction: 'row', gap: 8}, [
|
||||
// h('Label', {weight: 'bold', text: 'Description:'}),
|
||||
// h('ActorLabel', {uri: 'bsky.app', field: 'description'}),
|
||||
// ]),
|
||||
// ]),
|
||||
// ]),
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'Embed (Actor)', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8}, [
|
||||
// h('Embed', {uri: 'bsky.app'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8}, [
|
||||
// h('Embed', {uri: 'at://atproto.com/'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8}, [
|
||||
// h('Embed', {uri: 'at://pfrazee.com'}),
|
||||
// ]),
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {text: 'Embed (Post)', size: 10, weight: 'bold'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8}, [
|
||||
// h('Embed', {uri: 'at://pfrazee.com/app.bsky.feed.post/3ku7fbojcqs25'}),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8}, [
|
||||
// h('Embed', {uri: 'at://bsky.app/app.bsky.feed.post/3ku73zs755e27'}),
|
||||
// ]),
|
||||
// h('Box', {pad: {x: 10}}, [
|
||||
// h('Label', {
|
||||
// text: 'Embed (Unsupported record type)',
|
||||
// size: 10,
|
||||
// weight: 'bold',
|
||||
// }),
|
||||
// ]),
|
||||
// h('Box', {border: 'secondary', corner: 8}, [
|
||||
// h('Embed', {uri: 'at://pfrazee.com/com.example.unknown/123'}),
|
||||
// ]),
|
||||
// ]),
|
||||
// ]),
|
||||
// ])
|
||||
|
||||
Reference in New Issue
Block a user