Initial commit

src/renderer/components/styled/Button.tsx

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes } from 'react';
+import cls from 'classnames';
+import { type LucideIcon } from 'lucide-react';
+
+import IconSpinner from './IconSpinner';
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+	primary?: boolean;
+	loading?: boolean;
+	disabled?: boolean;
+	icon?: LucideIcon;
+};
+
+const Button = ({
+	primary,
+	loading,
+	disabled,
+	icon: Icon,
+	children,
+	className,
+	...props
+}: Props) => (
+	<button
+		{...props}
+		onClick={props.onClick}
+		tabIndex={!!loading || !!disabled ? -1 : props.tabIndex}
+		className={cls('tw-button', className, {
+			'pointer-events-none': !!disabled || !!loading,
+			'grayscale': disabled,
+			'tw-button-primary': primary
+		})}
+	>
+		<span className={cls('select-none', { 'ml-[-12px]': !!loading || !!Icon })}>
+			{loading ? (
+				<IconSpinner size={23} strokeWidth={1.5} />
+			) : Icon ? (
+				<Icon size={23} strokeWidth={1.5} />
+			) : null}
+			{children}
+		</span>
+	</button>
+);
+
+export default Button;