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

---
import { CaretRightIcon } from "@radix-ui/react-icons";
import {
  Box,
  Button,
  Flex,
  Heading,
  Text,
  type ButtonProps,
} from "@radix-ui/themes";
import type { Tool } from "../constants/tools";
import { getStrings } from "../core/i18n/getStrings";
import { LinkI18n } from "./LinkI18n";

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

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

<style>
  .container {
    border-radius: var(--radius-2);
    background-size: cover;
    background-position: center;
    height: 16rem;

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

    &[data-significant="true"] {
      width: 100%;
      height: min(20rem, 50vh);
    }
  }

  .link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: inherit;
  }
</style>

<Flex
  style={{
    backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
  }}
  data-significant={tool.significant}
  className="container"
  position="relative"
  overflow="hidden"
  flexGrow={tool.significant ? undefined : "1"}
  flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
>
  <LinkI18n
    {locale}
    className="link"
    underline="none"
    href={tool.href ?? `/${tool.id}`}
    target={tool.href ? "_blank" : undefined}
  >
    <Box
      flexGrow="1"
      style={{
        backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    />

    <Flex
      px={{ initial: "6", md: tool.significant ? "8" : "6" }}
      py={{ initial: "4", sm: tool.significant ? "6" : "4" }}
      gap="4"
      align="center"
      justify="between"
      width="100%"
      direction={{ initial: "column", xs: "row" }}
      style={{
        backgroundColor: "var(--color-panel-translucent)",
        backdropFilter: "blur(64px)",
        WebkitBackdropFilter: "blur(64px)",
      }}
    >
      <Flex
        direction="column"
        justify="center"
        align={{ initial: "center", xs: "start" }}
      >
        <Heading
          align={{ initial: "center", sm: "left" }}
          size={{ initial: "6", sm: tool.significant ? "7" : "5" }}
          weight="medium"
        >
          {toolStrings.name}
        </Heading>
        <Text
          align={{ initial: "center", sm: "left" }}
          size={{ initial: "3", sm: tool.significant ? "4" : "3" }}
          color="gray"
        >
          {toolStrings.description}
        </Text>
      </Flex>

      <Button
        size={{
          initial: undefined,
          sm: tool.significant ? "3" : undefined,
        }}
        color={tool.button as ButtonProps["color"]}
        style={{ cursor: "inherit" }}
      >
        {toolStrings.button}
        <CaretRightIcon />
      </Button>
    </Flex>
  </LinkI18n>
</Flex>