From 7c4a02e114e747f1bc12f0cf048e23e38d6401fa Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Wed, 20 Nov 2024 16:47:54 +0100
Subject: [PATCH] UI/components/button: init button component

---
 .../app/src/components/button/button.test.tsx | 27 +++++++
 .../app/src/components/button/index.tsx       | 73 +++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 pkgs/webview-ui/app/src/components/button/button.test.tsx
 create mode 100644 pkgs/webview-ui/app/src/components/button/index.tsx

diff --git a/pkgs/webview-ui/app/src/components/button/button.test.tsx b/pkgs/webview-ui/app/src/components/button/button.test.tsx
new file mode 100644
index 000000000..ece9bd422
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/button/button.test.tsx
@@ -0,0 +1,27 @@
+import { Button } from ".";
+import FlashIcon from "@/icons/flash.svg";
+
+export const Test = () => {
+  <div class="p-8">
+    <Button>Label</Button>
+    <Button
+      startIcon={<FlashIcon width={16} height={16} viewBox="0 0 48 48" />}
+    >
+      Label
+    </Button>
+    <Button
+      variant="light"
+      endIcon={<FlashIcon width={16} height={16} viewBox="0 0 48 48" />}
+    >
+      Label
+    </Button>
+    <Button size="s">Label</Button>
+    <Button
+      variant="light"
+      size="s"
+      endIcon={<FlashIcon width={13} height={13} viewBox="0 0 48 48" />}
+    >
+      Label
+    </Button>
+  </div>;
+};
diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx
new file mode 100644
index 000000000..9d179f11a
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/button/index.tsx
@@ -0,0 +1,73 @@
+import { type JSX } from "solid-js";
+import cx from "classnames";
+
+type Variants = "dark" | "light";
+type Size = "default" | "s";
+
+const variantColors: Record<Variants, string> = {
+  dark: cx(
+    "border-secondary-950 bg-primary-900 text-white",
+    "shadow-inner-primary",
+    // Hover state
+    // Focus state
+    // Active state
+    "hover:border-secondary-900 hover:bg-secondary-700",
+    "focus:border-secondary-900",
+    "active:border-secondary-900 active:shadow-inner-primary-active",
+    // Disabled
+    "disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300",
+  ),
+  light: cx(
+    "border-secondary-800 bg-secondary-100 text-secondary-800",
+    "shadow-inner-secondary",
+    // Hover state
+    // Focus state
+    // Active state
+    "hover:bg-secondary-200 hover:text-secondary-900",
+    "focus:bg-secondary-200 focus:text-secondary-900",
+    "active:bg-secondary-200 active:text-secondary-950 active:shadow-inner-secondary-active",
+    // Disabled
+    "disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700",
+  ),
+};
+
+const sizePaddings: Record<Size, string> = {
+  default: cx("rounded-[0.1875rem] px-4 py-2"),
+  s: cx("rounded-sm py-[0.375rem] px-3"),
+};
+
+interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variants;
+  size?: Size;
+  children: JSX.Element;
+  startIcon?: JSX.Element;
+  endIcon?: JSX.Element;
+}
+export const Button = (props: ButtonProps) => {
+  const {
+    children,
+    variant = "dark",
+    size = "default",
+    startIcon,
+    endIcon,
+    ...buttonProps
+  } = props;
+  return (
+    <button
+      class={cx(
+        // Layout
+        "inline-flex items-center flex-shrink gap-2 justify-center",
+        // Styles
+        "border border-solid",
+        sizePaddings[size],
+        // Colors
+        variantColors[variant],
+      )}
+      {...buttonProps}
+    >
+      <span class="h-4">{startIcon}</span>
+      <span>{children}</span>
+      <span class="h-4">{endIcon}</span>
+    </button>
+  );
+};