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

---
import { CaretRightIcon } from "@radix-ui/react-icons";
import { api } from "../core/api/dynamic";
import { type Tool } from "../core/tools/tools";
import { Button } from "./Button";
import { LinkI18n } from "./LinkI18n";
import { Text } from "./Text";

interface Props {
  tool: Tool;
  locale: string;

  gradient?: boolean;
}

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

<style>
  .tool-card {
    flex-direction: column;
    height: 10rem;
    position: relative;
    align-items: stretch;
    gap: 0;

    border-radius: var(--space-3);

    background-size: cover;
    background-position: center;
    overflow: hidden;

    &[data-gradient="true"] {
      height: 10rem;
    }

    .poster {
      flex: 1;

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

      .gradient {
        width: 100%;
        height: 100%;

        background: linear-gradient(var(--gray-1), transparent);
      }
    }

    .info {
      display: flex;
      justify-content: space-between;
      padding: var(--space-4);

      backdrop-filter: blur(var(--space-6));

      .readable {
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>

<LinkI18n
  {locale}
  href={`/${tool.id}`}
  className="tool-card"
  underline="never"
  style={{
    backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
  }}
  data-gradient={gradient}
>
  <div
    class="poster"
    style={{
      backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
    }}
  >
    {gradient && <div class="gradient" />}
  </div>

  <div class="info">
    <div class="readable">
      <Text weight="medium">{toolStrings.name}</Text>
      <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
    </div>

    <Button color={tool.accent}>
      {toolStrings.action}
      <CaretRightIcon />
    </Button>
  </div>
</LinkI18n>