blitzkit/packages/website/src/components/ToolBanner.astro

---
import type { Tool } from "../constants/tools";
import { getStrings } from "../core/i18n/getStrings";
import { Heading } from "./Heading";

interface Props {
  locale: string;
  tool: Tool;
}

const { tool, locale } = Astro.props;
const strings = getStrings(locale);
const toolStrings =
  strings.website.tools[tool.id as keyof typeof strings.website.tools];
---

<style>
  .tool-banner {
    background-size: cover;

    .content {
      width: 100%;
      height: 100%;
      position: relative;

      display: flex;
      justify-content: center;
      gap: var(--space-4);
      padding: var(--space-5) var(--space-4);
      box-sizing: border-box;

      backdrop-filter: var(--blur-tint);

      :root.light & {
        backdrop-filter: var(--blur-tint) invert(1) hue-rotate(180deg);
      }

      @media (width > 40rem) {
        padding: var(--space-6) var(--space-4);
      }

      .centered {
        flex: 1;
        max-width: var(--page-width);

        display: flex;
        flex-direction: column;
      }

      .pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        :root.light & {
          filter: invert(1) brightness(0);
        }

        mask-image: linear-gradient(
          90deg,
          transparent 25%,
          var(--black-a1),
          transparent
        );
        mask-repeat: no-repeat;
        mask-size: cover;
      }
    }
  }
</style>

<div
  class="tool-banner"
  style={{
    backgroundImage: `url(/media/tools/banners/${tool.id}.webp)`,
    backgroundPosition: tool.banner_background_position ?? "top",
  }}
>
  <div class="content">
    <div
      class="pattern"
      style={{ backgroundImage: `url(/media/patterns/${tool.id}.svg)` }}
    >
    </div>

    <div class="centered">
      <Heading weight="bold" size="2">
        {toolStrings.name}
      </Heading>
    </div>
  </div>
</div>