43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
import { Metadata } from '@redwoodjs/web'
|
|
|
|
import ContactCardCell from 'src/components/ContactCard/ContactCardCell'
|
|
|
|
const ContactPage = () => {
|
|
const [width, setWidth] = useState()
|
|
const [height, setHeight] = useState()
|
|
|
|
const observedDiv = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (!observedDiv.current) return
|
|
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
if (observedDiv.current.offsetWidth !== width)
|
|
setWidth(observedDiv.current.offsetWidth)
|
|
|
|
if (observedDiv.current.offsetHeight !== height)
|
|
setHeight(observedDiv.current.offsetHeight)
|
|
})
|
|
|
|
resizeObserver.observe(observedDiv.current)
|
|
|
|
return function cleanup() {
|
|
resizeObserver.disconnect()
|
|
}
|
|
}, [width, height])
|
|
|
|
return (
|
|
<>
|
|
<Metadata title={`${process.env.NAME} | Contact`} />
|
|
|
|
<div className="flex min-h-[calc(100vh-6rem)] items-center justify-center">
|
|
<ContactCardCell />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ContactPage
|