100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname } from 'next/navigation';
|
|
import { useEffect, useState } from 'react';
|
|
import { z } from 'zod';
|
|
import { NewsTile, NewsTileSchema } from '../../../../utils/schemas';
|
|
import { Tile } from './tile';
|
|
|
|
type TilesProps = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export const Tiles = ({ children }: TilesProps) => {
|
|
const pathname = usePathname();
|
|
const [windowSize, setWindowSize] = useState<{
|
|
width: number;
|
|
height: number;
|
|
}>({
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
const [news, setNews] = useState<z.infer<typeof NewsTileSchema>[]>();
|
|
|
|
useEffect(() => {
|
|
async function getNews() {
|
|
const news: NewsTile[] = await fetch('/api/news').then(res => res.json());
|
|
|
|
if (news) {
|
|
setNews(news);
|
|
}
|
|
}
|
|
|
|
if (!news) {
|
|
getNews();
|
|
setWindowSize({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
});
|
|
}
|
|
|
|
const handleResize = () => {
|
|
setWindowSize({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
});
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
}, [setWindowSize, news]);
|
|
|
|
if (pathname === '/maintenance') return <div>{children}</div>;
|
|
|
|
function renderTile(key: number) {
|
|
if (!news) return <div key={key}></div>;
|
|
|
|
const randomA = Math.floor(Math.random() * news?.length);
|
|
const randomB = Math.floor(
|
|
Math.random() * news?.filter((_, index) => index !== randomA)?.length
|
|
);
|
|
|
|
return (
|
|
<div key={key} className={`m-1 h-40 w-40`}>
|
|
<Tile newsA={news[randomA]} newsB={news[randomB]} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function renderRow(columns: number, key: number) {
|
|
return (
|
|
<div key={key} className='flex justify-between'>
|
|
{Array.from({ length: columns }).map((_, index) => renderTile(index))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function renderGrid() {
|
|
const columns = Math.ceil(windowSize.width / (40 * 4));
|
|
const rows = Math.ceil(windowSize.height / (40 * 4));
|
|
|
|
return (
|
|
<div>
|
|
<div className='-ml-12 -mt-10 flex flex-col justify-between'>
|
|
{Array.from({ length: rows }).map((_, index) =>
|
|
renderRow(columns, index)
|
|
)}
|
|
</div>
|
|
<div className='absolute inset-0 flex items-center justify-center'>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
|
|
};
|