Samuel Newman
4b3ec55732
* add build output to web build * simplify post-build step by copying everything at once * make script that converts placeholder -> iframe * dynamically resize iframe based on inner content Requires the iframe content to `postMessage` its height back up to the parent * add lang to embed * svg explicit height -> viewBox * add build output to web build * simplify post-build step by copying everything at once * attempt to fix go embed issue * rm changes to bskyweb * remove another bskyweb change * embed landing page * Drop xl breakpoint, too far down * Remove pointer enter behavior * Avoid button width jump * Escape HTML --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import {ComponentChildren, h} from 'preact'
|
|
import {useEffect, useRef} from 'preact/hooks'
|
|
|
|
import {Link} from './link'
|
|
|
|
export function Container({
|
|
children,
|
|
href,
|
|
}: {
|
|
children: ComponentChildren
|
|
href: string
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const prevHeight = useRef(0)
|
|
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
const observer = new ResizeObserver(entries => {
|
|
const entry = entries[0]
|
|
if (!entry) return
|
|
|
|
let {height} = entry.contentRect
|
|
height += 2 // border top and bottom
|
|
if (height !== prevHeight.current) {
|
|
prevHeight.current = height
|
|
window.parent.postMessage(
|
|
{height, id: new URLSearchParams(window.location.search).get('id')},
|
|
'*',
|
|
)
|
|
}
|
|
})
|
|
observer.observe(ref.current)
|
|
return () => observer.disconnect()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="w-full bg-white hover:bg-neutral-50 relative transition-colors max-w-[600px] min-w-[300px] flex border rounded-xl"
|
|
onClick={() => {
|
|
if (ref.current) {
|
|
// forwardRef requires preact/compat - let's keep it simple
|
|
// to keep the bundle size down
|
|
const anchor = ref.current.querySelector('a')
|
|
if (anchor) {
|
|
anchor.click()
|
|
}
|
|
}
|
|
}}>
|
|
<Link href={href} />
|
|
<div className="flex-1 px-4 pt-3 pb-2.5">{children}</div>
|
|
</div>
|
|
)
|
|
}
|