45 lines
972 B
TypeScript
45 lines
972 B
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { debounce } from '@/utils/debounce'
|
||
|
|
import { useEffect, useRef, useState } 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>
|
||
|
|
)
|
||
|
|
}
|