feat: links

packages/website-ue/src/components/Link/index.css

@@ -0,0 +1,14 @@
+.link {
+  color: var(--accent-11);
+  text-decoration-color: currentColor;
+
+  &[data-underline="hover"],
+  &[data-underline="never"] {
+    text-decoration: none;
+  }
+
+  &[data-underline="hover"]:hover,
+  &[data-underline="hover"]:focus {
+    text-decoration: underline;
+  }
+}

packages/website-ue/src/components/Link/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface LinkProps extends ComponentProps<"a"> {
+  underline?: "always" | "hover" | "never";
+}
+
+export function Link({ className, underline = "always", ...props }: LinkProps) {
+  return (
+    <a
+      className={classNames("link", className)}
+      {...props}
+      data-underline={underline}
+    />
+  );
+}

packages/website-ue/src/components/LinkI18n.tsx

@@ -0,0 +1,15 @@
+import locales from "@blitzkit/i18n/locales.json";
+import { Link, type LinkProps } from "./Link";
+
+export interface LinkI18n extends LinkProps {
+  locale: string;
+}
+
+export function LinkI18n({ locale, href, ...props }: LinkI18n) {
+  return (
+    <Link
+      href={`${locale === locales.default ? "" : `/${locale}`}${href}`}
+      {...props}
+    />
+  );
+}

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

@@ -3,6 +3,7 @@ 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 {
@@ -49,8 +50,11 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   }
 </style>
 
-<div
-  class="tool-card"
+<LinkI18n
+  {locale}
+  href={`/${tool.id}`}
+  className="tool-card"
+  underline="never"
   style={{
     backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
   }}
@@ -74,4 +78,4 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       <CaretRightIcon />
     </Button>
   </div>
-</div>
+</LinkI18n>

packages/website-ue/src/layouts/BaseLayout.astro

@@ -29,7 +29,7 @@ const { accent, noNavbar } = Astro.props;
         margin: 0;
         display: flex;
         flex-direction: column;
-        gap: var(--space-4);
+        gap: var(--space-5);
 
         background-color: var(--gray-1);
         color: var(--gray-12);

packages/website-ue/src/pages/[...locale]/index.astro

@@ -28,7 +28,7 @@ const { locale } = Astro.props;
 
   <HomeHero {locale} />
 
-  <Section class="cards">
+  <Section>
     {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
   </Section>
 </BaseLayout>