Tabs.astro

---
import type { XOR } from "~/util/types";
import Icon from "./Icon.astro";
import jsdom from "jsdom";
import { Image } from "astro:assets";
import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";

type BaseButtonDefinition = {
  name: string;
  accent?: string;
};

type ButtonDefinition = XOR<
  BaseButtonDefinition & { icon: IconDefinition },
  BaseButtonDefinition & { image: ImageMetadata }
>;

export interface Props {
  /** Array of buttons to show in the tab selector. */
  buttons: ButtonDefinition[];
  /** The name of the active tab. */
  active: string;
}

const { buttons, active } = Astro.props;

const DOM = new jsdom.JSDOM();
const body = DOM.window.document.body;

const rendered = await Astro.slots.render("default");
body.innerHTML += rendered;

body.querySelector(`[data-tab="${active}"]`)?.classList.add("active");
---

<div class="tabs">
  <div class="buttons">
    {
      buttons.map((button) => (
        <button
          value={button.name}
          class={active === button.name ? "active" : ""}
          style={`--accent-color: ${button.accent ?? "#ffffff"}`}
        >
          <span>
            {button.image && <Image src={button.image} alt={button.name} />}
            {button.icon && <Icon icon={button.icon} />}
            {button.name}
          </span>
        </button>
      ))
    }
  </div>
  <div class="windows" set:html={body.innerHTML} />
</div>

<script>
  const instances = document.querySelectorAll("div.tabs");

  for (const instance of instances) {
    const buttons = instance.querySelectorAll<HTMLButtonElement>(
      ":scope > div.buttons > button",
    );
    const tabContainer = instance.querySelector<HTMLDivElement>(
      ":scope > div.windows",
    );

    if (!tabContainer) {
      console.error("Failed to get tabs for tabs component", instance);
      break;
    }

    for (const button of buttons) {
      const tab = tabContainer.querySelector(`[data-tab="${button.value}"]`);
      if (!tab) {
        console.error("Failed to get linked tab for a button", button);
        break;
      }

      button.addEventListener("click", () => {
        buttons.forEach((button) => button.classList.remove("active"));
        Array.from(tabContainer.children).forEach((tab) =>
          tab.classList.remove("active"),
        );
        button.classList.add("active");
        tab.classList.add("active");
      });
    }
  }
</script>

<style lang="scss">
  $transition-length: 0.3s;

  .tabs {
    position: relative;
    width: 100%;
    margin: 0.5em auto;
    border-radius: 0.5em;
    overflow: hidden;

    & > div.buttons button,
    div[data-client] {
      transition: filter ease-in-out 0.5s;
    }

    & > div.buttons {
      display: flex;
      width: 100%;

      button {
        color: white;
        background-color: #272727bb;
        width: 100%;
        border: none;
        padding: 0.5em 1em;
        border-left: #333333 solid 0.075rem;
        border-right: #333333 solid 0.075rem;
        position: relative;
        z-index: 2;
        font-size: 1em;

        &:first-of-type() {
          border-top-left-radius: 0.5em;
          border-left: none;
        }

        &:last-of-type() {
          border-top-right-radius: 0.5em;
          border-right: none;
        }

        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 0px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          z-index: 0;
          transition: height ease-in-out $transition-length;
          background-color: var(--accent-color);
        }

        & > span {
          transition: filter $transition-length ease-in-out;
          filter: saturate(0);
          display: inline-flex;
          align-items: center;
          gap: 0.5em;
        }

        &:hover {
          cursor: pointer;

          & > span {
            filter: saturate(0.5);
          }
        }

        &:global(.active) {
          & > span {
            filter: saturate(1);
          }
          &::after {
            height: 0.1em;
            box-shadow: 0px -1px 6px 0px var(--accent-color);
          }
        }

        img,
        :global(.icon) {
          width: 1em;
          height: 1em;
          text-align: center;
        }
        img {
          font-size: 1.5em;
        }
        :global(.icon) {
          font-size: 1.8em;
        }
      }
    }

    :global(div[data-tab]) {
      background-color: #0000007d;
      position: absolute;
      left: -999vw;
      top: -999vh;
      opacity: 0;
      padding: 0.5em;

      :global(p) {
        margin: 0.25em auto;
      }

      &:global(.active) {
        position: static;
        opacity: 1;
      }

      & > div.placeholder {
        text-align: center;
        font-size: 1.2em;

        :global(.icon) {
          font-size: 2em;
        }

        & > div {
          font-size: 1.5em;
          font-weight: 600;
        }

        & > p {
          margin: 0.5em auto;
        }
      }
    }
  }
</style>