4000 Weeks

weeks.tsx

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>
  );
}