jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {ComponentChildren, h} from 'preact'
2import {useEffect, useRef} from 'preact/hooks'
3
4import {Link} from './link'
5
6export function Container({
7 children,
8 href,
9}: {
10 children: ComponentChildren
11 href?: string
12}) {
13 const ref = useRef<HTMLDivElement>(null)
14 const prevHeight = useRef(0)
15
16 useEffect(() => {
17 if (ref.current) {
18 const observer = new ResizeObserver(entries => {
19 const entry = entries[0]
20 if (!entry) return
21
22 let {height} = entry.contentRect
23 height += 2 // border top and bottom
24 if (height !== prevHeight.current) {
25 prevHeight.current = height
26 window.parent.postMessage(
27 {height, id: new URLSearchParams(window.location.search).get('id')},
28 '*',
29 )
30 }
31 })
32 observer.observe(ref.current)
33 return () => observer.disconnect()
34 }
35 }, [])
36
37 return (
38 <div
39 ref={ref}
40 className="w-full bg-brand text-black dark:bg-brand relative transition-colors max-w-[600px] min-w-[300px] flex items-center dark:text-slate-200 rounded-[20px] cursor-pointer hover:bg-opacity-90"
41 onClick={() => {
42 if (ref.current && href) {
43 // forwardRef requires preact/compat - let's keep it simple
44 // to keep the bundle size down
45 const anchor = ref.current.querySelector('a')
46 if (anchor) {
47 anchor.click()
48 }
49 }
50 }}>
51 {href && <Link href={href} />}
52 <div className="flex-1 px-[6px] pt-[6px] pb-2.5 max-w-full">
53 {children}
54 </div>
55 </div>
56 )
57}