feat: start of cards

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

@@ -0,0 +1,2 @@
+.button {
+}

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} />;
+}

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}
     />

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>

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>

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) => <ToolCard {tool} />)}
-    Object.values(tools).map((tool) => (
-      <p>
-        <a href={`/${tool.id}`}>{tool.id}</a>
-      </p>
-    ))
-  }
 </BaseLayout>