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

---
import { ArrowLeftIcon } from "@radix-ui/react-icons";
import { api } from "../api/dynamic";
import type { Tool } from "../constants/tools";
import { Logo } from "../icons/Logo";
import { Back } from "./Back";
import { Flex } from "./Flex";
import { Heading } from "./Heading";
import { IconButton } from "./IconButton";

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

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

<style>
  .tool-banner {
    --tool-banner-overlap: 8rem;

    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);

      overflow: hidden;

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

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

      .centered {
        position: relative;

        flex: 1;
        max-width: var(--page-width);

        .return {
          width: 0.75em;
          height: 0.75em;
        }

        .logo {
          position: absolute;

          pointer-events: none;

          right: 0;
          top: 50%;
          height: 100%;

          transform: translateY(-50%) scale(10);
          color: var(--black-a4);
        }
      }

      .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">
        <Flex align="center" gap="4">
          <Back client:load>
            <IconButton variant="soft" color="gray" highContrast>
              <ArrowLeftIcon className="return" />
            </IconButton>
          </Back>

          {toolStrings.name}
        </Flex>
      </Heading>

      <Logo className="logo" />
    </div>
  </div>
</div>