Skip to content

Instantly share code, notes, and snippets.

@brandonpittman
Last active Aug 26, 2021
Embed
What would you like to do?
4000 Weeks
import clsx from 'clsx';
import { differenceInWeeks } from 'date-fns';
const fillIn = (complete: boolean) =>
clsx(
complete ? 'bg-gray-300' : 'bg-transparent',
'h-1.5 w-1.5 border border-gray-300 rounded-full'
);
const weekCount = differenceInWeeks(new Date(), new Date('8/31/1983'));
export default function Weeks() {
const boxes = Array(3999).fill(undefined);
return (
<div className="h-screen p-4 bg-black grid place-items-center gap-4">
<ul className="flex flex-wrap w-full max-w-xl mx-auto gap-0.5">
{boxes.map((_x, index) => (
<li key={index} className={fillIn(index <= weekCount)} />
))}
</ul>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment