refactor(ui): extract reusable component package

src/components/IconButton.tsx

@@ -0,0 +1,33 @@
+import type { ButtonHTMLAttributes } from "react";
+import { IconGlyph } from "./IconGlyph";
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  icon: string;
+  label: string;
+  active?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+export function IconButton({
+  icon,
+  label,
+  active = false,
+  disabled = false,
+  type = "button",
+  className = "",
+  ...buttonProps
+}: IconButtonProps) {
+  return (
+    <button
+      {...buttonProps}
+      className={className ? `icon-button ${className} ` : "icon-button "}
+      aria-label={label}
+      data-active={active}
+      disabled={disabled}
+      type={type}
+    >
+      <IconGlyph name={icon} size="sm" />
+    </button>
+  );
+}