~repos /only-bible-app

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

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

<Popover id="books-popover" title="Books">
  <ul>
    {
      Object.keys(BOOKS).map((name) => (
        <li>
          <button class="book-button">{name}</button>
        </li>
      ))
    }
  </ul>
</Popover>
<script is:inline define:vars={{ bible }}>
  document.querySelectorAll(".book-button").forEach((button) => {
    button.addEventListener("click", () => {
      const book = button.textContent;
      const link = document.createElement("a");
      link.href = `/bibles/${bible}/${book}/1`;
      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>