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

---
import { api } from "../api/dynamic";
import type { Tool } from "../constants/tools";
import { Heading } from "./Heading";
import { LinkI18n } from "./LinkI18n";

interface Props {
  tool: Tool;
  locale: string;
  minor?: boolean;
}

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

<style>
  .container {
    flex: 1;

    display: flex;

    border-radius: var(--space-3);
    background-size: cover;
    background-position: center;

    position: relative;
    overflow: hidden;

    &[data-disabled="true"] {
      opacity: 0.25;
    }
  }

  .link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: inherit;

    .background {
      flex: 1;

      background-size: cover;
      background-position: center;
    }

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 100%;

      padding: var(--space-5);
      box-sizing: border-box;

      backdrop-filter: blur(64px);
      -webkit-backdrop-filter: blur(64px);

      &[data-minor="true"] {
        padding: var(--space-4);
      }

      .wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
</style>

<div
  style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
  class="container"
>
  <LinkI18n
    {locale}
    className="link"
    underline="never"
    href={tool.href ?? `/${tool.id}`}
    target={tool.href ? "_blank" : undefined}
  >
    <div
      class="background"
      style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
    >
    </div>

    <div class="content" data-minor={minor}>
      <div class="wrapper">
        <Heading size={minor ? "3" : "2"} weight="medium">
          {toolStrings.name}
        </Heading>
      </div>
    </div>
  </LinkI18n>
</div>