~repos /only-bible-app

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

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

<Popover id="bibles-popover" title="Bibles">
  <ul>
    {
      BIBLES.map((bible) => (
        <li>
          <button class="bible-button" data-bible={bible.version}>
            {bible.name} {bible.version}
          </button>
        </li>
      ))
    }
  </ul>
</Popover>
<script is:inline define:vars={{ book, chapter }}>
  document.querySelectorAll(".bible-button").forEach((button) => {
    button.addEventListener("click", () => {
      const bible = button.getAttribute("data-bible");
      const link = document.createElement("a");
      link.href = `/bibles/${bible}/${book}/${chapter}`;
      link.click();
    });
  });
</script>
<style>
  ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    color: var(--color-link);
  }
</style>