Scratch space for learning atproto app development
cduck.me
1import { AtUri } from '@atproto/syntax'
2import type { Status } from '#/db/schema'
3import { html } from '../view'
4import { shell } from './shell'
5
6type Props = {
7 statuses: Status[]
8 profile?: { displayName?: string; handle: string }
9}
10
11export function home(props: Props) {
12 return shell({
13 title: 'Home',
14 content: content(props),
15 })
16}
17
18function content({ statuses, profile }: Props) {
19 return html`<div id="root">
20 <h1>Welcome to the Atmosphere</h1>
21 ${profile
22 ? html`<form action="/logout" method="post">
23 <p>
24 Hi, <b>${profile.displayName || profile.handle}</b>. It's pretty
25 special here.
26 <button type="submit">Log out.</button>
27 </p>
28 </form>`
29 : html`<p>
30 It's pretty special here.
31 <a href="/login">Log in.</a>
32 </p>`}
33 <ul>
34 ${statuses.map((status) => {
35 return html`<li>
36 ${status.status}
37 <a href="${toBskyLink(status.authorDid)}" target="_blank"
38 >${status.authorDid}</a
39 >
40 </li>`
41 })}
42 </ul>
43 </div>`
44}
45
46function toBskyLink(did: string) {
47 return `https://bsky.app/profile/${did}`
48}