~repos /only-bible-app

---
import { BOOKS } from "@/consts";
import Popover from "./Popover.astro";

type Props = {
  bible: string;
  book: string;
};
const { bible, book }: Props = Astro.props;
---

<Popover id="chapters-popover" title="Chapters">
  <ul>
    {
      Array.from({ length: BOOKS[book] }, (_, i) => (
        <li>
          <button class="chapter-button" data-chapter={i + 1}>
            {i + 1}
          </button>
        </li>
      ))
    }
  </ul>
</Popover>
<script is:inline define:vars={{ bible, book }}>
  document.querySelectorAll(".chapter-button").forEach((button) => {
    button.addEventListener("click", () => {
      const chapter = button.getAttribute("data-chapter");
      const link = document.createElement("a");
      link.href = `/bibles/${bible}/${book}/${chapter}`;
      link.click();
    });
  });
</script>
<style>
  ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    color: var(--color-link);
  }
</style>