~repos /only-bible-app

---
import { BIBLES, BOOKS } from "@/consts";
import { Icon } from "astro-icon/components";
import { ThemeSwitch } from "astro-color-scheme";
import Selector from "./Selector.astro";

type Props = {
  bible: string;
  book: string;
  localBookName: string;
  chapter: string;
};

const { bible, book, chapter, localBookName }: Props = Astro.props;

const bibleItems = BIBLES.map((item) => ({
  text: item.version,
  link: `/bibles/${item.version}/${book}/1`,
}));
const bookItems = Object.keys(BOOKS).map((bookKey) => ({
  text: bookKey,
  link: `/bibles/${bible}/${bookKey}/1`,
}));
const chapterItems = Array.from(
  { length: BOOKS[book as keyof typeof BOOKS] },
  (_, i) => ({
    text: `${i + 1}`,
    link: `/bibles/${bible}/${book}/${i + 1}`,
  })
);
---

<div class="header">
  <Selector title={localBookName} items={bookItems} />
  <Selector title={chapter} items={chapterItems} />
  <div class="bible">
    <ThemeSwitch strategy="button">
      <button class="theme-change">
        <Icon style="display: var(--btn-light);" name="carbon:sun" />
        <Icon style="display: var(--btn-dark);" name="carbon:moon" />
      </button>
    </ThemeSwitch>
    <Selector title={bible} items={bibleItems} />
  </div>
</div>
<style>
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .bible {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    #astro-color-scheme-switch {
      display: flex;
      align-items: center;

      button {
        padding-right: 12px;
        cursor: pointer;
      }
    }
  }

  .chapter {
    margin-left: 10px;
  }

  .theme-change {
    margin-right: 10px;
  }
</style>