advcal/components/calendar.jsx

import { useContext } from "react";

import AppContext from "../context/app";

const Calendar = () => {
  const { loading, songs, openDoor } = useContext(AppContext);

  if (loading || !songs) {
    return null;
  }

  return (
    <div>
      <ul className="cal">
        {songs.map((song, index) => {
          const classes = ["calcard", song.locked && "calcard__locked"]
            .filter(Boolean)
            .join(" ");

          return (
            <li
              className={classes}
              data-id={index}
              key={song.id}
              onClick={() => !song.locked && openDoor(index)}
              title={
                song.locked &&
                `Es ist noch nicht der ${new Date(
                  song.lockedUntil
                ).toLocaleDateString()}! Geduld, nur Geduld!` || index + 1
              }
            >
              <span className="cardnumber">{index + 1}</span>
            </li>
          );
        })}
      </ul>
    </div >
  );
};

export default Calendar;