mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-22 11:17:05 +02:00
130 lines
2.9 KiB
Plaintext
130 lines
2.9 KiB
Plaintext
---
|
|
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>
|