Add initial webui

webui/src/components/ui/Button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { Play, Square, Loader2 } from "lucide-react";
+import styles from "@/styles/Button.module.css";
+
+const iconMap = {
+	play: Play,
+	stop: Square,
+	loading: Loader2,
+};
+
+function getIcon(iconName: string) {
+	return iconMap[iconName as keyof typeof iconMap];
+}
+
+interface ButtonProps
+	extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+	variant?:
+		| "primary"
+		| "success"
+		| "danger"
+		| "warning"
+		| "info"
+		| "light"
+		| "dark";
+	iconLeft?: string;
+	iconRight?: string;
+	loading?: boolean;
+	children: ReactNode;
+	tooltip?: string;
+	type?: "submit" | "reset" | "button";
+}
+
+export function Button({
+	variant = "primary",
+	iconLeft,
+	iconRight,
+	loading = false,
+	children,
+	className,
+	disabled,
+	tooltip,
+	type = "button",
+	...props
+}: ButtonProps) {
+	return (
+		<button
+			type={type}
+			className={clsx(
+				styles.button,
+				styles[`is-${variant}`],
+				loading && styles.isLoading,
+				className,
+			)}
+			disabled={disabled || loading}
+			title={tooltip}
+			{...props}
+		>
+			{iconLeft && !loading && (() => {
+				const IconComponent = getIcon(iconLeft);
+				return IconComponent ? <IconComponent size={16} /> : null;
+			})()}
+			{loading && <Loader2 size={16} className={styles.spin} />}
+			<span>{children}</span>
+			{iconRight && !loading && (() => {
+				const IconComponent = getIcon(iconRight);
+				return IconComponent ? <IconComponent size={16} /> : null;
+			})()}
+		</button>
+	);
+}