tldraw/apps/docs/components/FancyBox.tsx
Steve Ruiz 9a6f4e8c4b
[docs] design shuffle (#2951)
This PR incorporates design tweaks from #2922 without the home page or
content changes.

These are:
- Replacing all `hello@tldraw.com` with `sales@tldraw.com`
- Fix mailto links.
- Showing the first item in a section on direct routes to the section
- Splitting the article page for human-written content from article page
for generated content
- Splitting the layout for the landing page from the rest of the site
(temporarily identical to the regular content)
- Removing headings from left sidebar
- Restoring headings in right sidebar for human-written pages with > 1
heading link
- Styling block quote
- Adjusting section link appearance / layout in header / menu
- Changing the order of search results to preference docs over examples
- Updating copy on events
- Removing copy on user interface menus
- Adding hero as prop to all articles
- Updated icon
- Fixing a few broken links
- Replaces the sandpack code blocks with hljs code blocks, except in
examples.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00

43 lines
972 B
TypeScript

'use client'
import { useRef } from 'react'
export default function FancyBox() {
const rContainer = useRef<HTMLDivElement>(null)
// const [items, setItems] = useState<number[]>([])
// useEffect(() => {
// const populate = debounce(() => {
// const elm = rContainer.current
// if (!elm) return
// const width = elm.clientWidth
// const height = elm.clientHeight
// const SIZE = 32
// const cols = Math.ceil(width / SIZE)
// const rows = Math.ceil(height / SIZE)
// const items = Array.from(Array(cols * rows)).map((_, i) => i)
// setItems(items)
// }, 100)
// populate()
// window.addEventListener('resize', populate)
// return () => {
// window.removeEventListener('resize', populate)
// }
// }, [])
return (
<div className="footer__fancybox" ref={rContainer}>
{/* {items.map((i) => {
const c = 1 + (i % 7)
return <div key={i} className="footer__fancybox__item" data-c={c} />
})} */}
</div>
)
}