From db8ac195d41274225379c3b0abe482c317e41af0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 9 Jan 2026 14:04:59 -0600
Subject: [PATCH] feat: start of cards

---
 .../src/components/Button/index.css           |  2 ++
 .../src/components/Button/index.tsx           |  9 ++++++
 .../website-ue/src/components/Text/index.tsx  | 10 ++++--
 .../src/components/TextField/index.tsx        |  8 +++--
 .../website-ue/src/components/ToolCard.astro  | 31 +++++++++++++++++++
 .../src/pages/[...locale]/index.astro         |  9 ++----
 6 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 packages/website-ue/src/components/Button/index.css
 create mode 100644 packages/website-ue/src/components/Button/index.tsx
 create mode 100644 packages/website-ue/src/components/ToolCard.astro

diff --git a/packages/website-ue/src/components/Button/index.css b/packages/website-ue/src/components/Button/index.css
new file mode 100644
index 000000000..f54e640d9
--- /dev/null
+++ b/packages/website-ue/src/components/Button/index.css
@@ -0,0 +1,2 @@
+.button {
+}
diff --git a/packages/website-ue/src/components/Button/index.tsx b/packages/website-ue/src/components/Button/index.tsx
new file mode 100644
index 000000000..21336cec2
--- /dev/null
+++ b/packages/website-ue/src/components/Button/index.tsx
@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface ButtonProps extends ComponentProps<"button"> {}
+
+export function Button({ className, ...props }: ButtonProps) {
+  return <button className={classNames("button", className)} {...props} />;
+}
diff --git a/packages/website-ue/src/components/Text/index.tsx b/packages/website-ue/src/components/Text/index.tsx
index 16d63bd97..5c8e427bb 100644
--- a/packages/website-ue/src/components/Text/index.tsx
+++ b/packages/website-ue/src/components/Text/index.tsx
@@ -1,4 +1,5 @@
 import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
 import type { Color } from "../../core/ui/color";
 import "./index.css";
 
@@ -7,10 +8,15 @@ export interface TextProps extends ComponentProps<"span"> {
   lowContrast?: boolean;
 }
 
-export function Text({ color = "gray", lowContrast, ...props }: TextProps) {
+export function Text({
+  color = "gray",
+  lowContrast,
+  className,
+  ...props
+}: TextProps) {
   return (
     <span
-      className="text"
+      className={classNames("text", className)}
       style={{ color: `var(--${color}-${lowContrast ? 11 : 12})` }}
       {...props}
     />
diff --git a/packages/website-ue/src/components/TextField/index.tsx b/packages/website-ue/src/components/TextField/index.tsx
index 83f56ce05..0e3fd5f2a 100644
--- a/packages/website-ue/src/components/TextField/index.tsx
+++ b/packages/website-ue/src/components/TextField/index.tsx
@@ -1,13 +1,17 @@
 import type { ComponentProps, ReactNode } from "react";
+import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
 export interface TextFieldProps extends ComponentProps<"input"> {
   children?: ReactNode;
 }
 
-export function TextField({ children, ...props }: TextFieldProps) {
+export function TextField({ children, className, ...props }: TextFieldProps) {
   return (
-    <div className="text-field" data-has-icon={children !== undefined}>
+    <div
+      className={classNames("text-field", className)}
+      data-has-icon={children !== undefined}
+    >
       {children}
       <input {...props} />
     </div>
diff --git a/packages/website-ue/src/components/ToolCard.astro b/packages/website-ue/src/components/ToolCard.astro
new file mode 100644
index 000000000..cadc53c42
--- /dev/null
+++ b/packages/website-ue/src/components/ToolCard.astro
@@ -0,0 +1,31 @@
+---
+import { CaretRightIcon } from "@radix-ui/react-icons";
+import type { Tool } from "../core/tools/tools";
+import { Button } from "./Button";
+import { Text } from "./Text";
+
+interface Props {
+  tool: Tool;
+}
+
+const { tool } = Astro.props;
+---
+
+<style>
+  .tool-card {
+  }
+</style>
+
+<div class="tool-card">
+  <div>
+    <div>
+      <Text>{tool.id}</Text>
+      <Text>{tool.id}</Text>
+    </div>
+
+    <Button>
+      {tool.id}
+      <CaretRightIcon />
+    </Button>
+  </div>
+</div>
diff --git a/packages/website-ue/src/pages/[...locale]/index.astro b/packages/website-ue/src/pages/[...locale]/index.astro
index 53697d53a..ee34ed7c8 100644
--- a/packages/website-ue/src/pages/[...locale]/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/index.astro
@@ -4,6 +4,7 @@ import "@radix-ui/colors/amber-dark.css";
 import type { GetStaticPaths } from "astro";
 import packageJson from "../../../../../package.json";
 import HomeHero from "../../components/HomeHero.astro";
+import ToolCard from "../../components/ToolCard.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
@@ -24,11 +25,5 @@ const { locale } = Astro.props;
 
   <h1>blitzkit {packageJson.version}</h1>
 
-  {
-    Object.values(tools).map((tool) => (
-      <p>
-        <a href={`/${tool.id}`}>{tool.id}</a>
-      </p>
-    ))
-  }
+  {Object.values(tools).map((tool) => <ToolCard {tool} />)}
 </BaseLayout>