forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
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 += 4 // border-2 = 2px top + 2px 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 border-2 border-brand text-black relative transition-colors max-w-[600px] min-w-[300px] flex items-center dark:text-slate-200 rounded-[32px] overflow-hidden cursor-pointer"
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 max-w-full">{children}</div>
53 </div>
54 )
55}