First public commit

components/button/button.tsx

@@ -0,0 +1,71 @@
+import clsx from "clsx";
+import * as React from "react";
+
+import SpinnerIcon from "../icons/spinner.svg";
+
+export interface ButtonProps {
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: React.ReactElement;
+  htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  type?: "default" | "primary" | "danger" | "link";
+  form?: string;
+  href?: string;
+  rounded?: boolean;
+  title?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
+  {
+    children,
+    loading,
+    type = "default",
+    htmlType = "button",
+    className,
+    icon,
+    disabled,
+    href,
+    rounded,
+    ...passThroughProps
+  },
+  ref,
+) => {
+  return (
+    <button
+      ref={ref}
+      type={htmlType}
+      className={clsx(
+        {
+          "btn-default": type === "default",
+          "btn-primary": type === "primary",
+          "btn-danger": type === "danger",
+          "btn-link": type === "link",
+          "btn-disabled": disabled,
+          "rounded-full p-2 h-auto": rounded,
+          "w-10 p-0": !children,
+        },
+        className,
+      )}
+      {...passThroughProps}
+      disabled={disabled || loading}
+    >
+      {loading ? (
+        <SpinnerIcon
+          className={clsx("w-5 animate-spin inline-block", {
+            "mr-2": !!children,
+          })}
+        />
+      ) : icon ? (
+        React.cloneElement(icon, {
+          className: clsx("w-5 h-5", { "-ml-1 mr-2": !!children }),
+        })
+      ) : null}
+      {children}
+    </button>
+  );
+};
+
+export default React.forwardRef(Button);