add button component

app/javascript/src/components/Button/Button.tsx

@@ -0,0 +1,42 @@
+import type { MouseEvent } from "react";
+import React from "react";
+import cn from "classnames";
+
+type Props = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  variant?: "primary" | "dangeour";
+};
+
+const baseStyles =
+  "cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg";
+
+const Component: React.ForwardRefRenderFunction<unknown, Props> = (props) => {
+  const { className = "", variant = "primary", onClick, ...rest } = props;
+
+  const handleClick = (
+    e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
+  ) => {
+    e.stopPropagation();
+
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const variantStyle =
+    variant === "primary"
+      ? "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200"
+      : "bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200";
+
+  return (
+    <button
+      {...rest}
+      className={cn(baseStyles, className, variantStyle)}
+      onClick={(e) => handleClick(e)}
+    />
+  );
+};
+
+export const Button = React.forwardRef<unknown, Props>(Component);

app/javascript/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

app/javascript/src/components/Input/Input.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import React from "react";
 
-export type Props = React.DetailedHTMLProps<
+type Props = React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >;

app/javascript/src/components/Input/index.ts

@@ -0,0 +1 @@
+export * from "./Input";

app/javascript/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from "./Navbar";
 export * from "./SideNav";
 export * from "./Modal";
+export * from "./Input";
+export * from "./Button";