refactor: version 2.0 (React)

packages/renderer/src/components/Button.tsx

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react'
+
+export enum Color {
+  Primary = 'primary',
+  Gray = 'gray',
+}
+
+export enum Shape {
+  Default = 'default',
+  Square = 'square',
+}
+
+const Button = ({
+  children,
+  onClick,
+  color = Color.Primary,
+  iconColor = Color.Primary,
+  isSkelton = false,
+}: {
+  children: ReactNode
+  onClick: () => void
+  color?: Color
+  iconColor?: Color
+  isSkelton?: boolean
+}) => {
+  const shape =
+    Array.isArray(children) && children.length === 1
+      ? Shape.Square
+      : Shape.Default
+
+  return (
+    <button
+      onClick={onClick}
+      className={classNames(
+        'btn-pressed-animation flex cursor-default items-center rounded-lg text-lg font-semibold',
+        {
+          'px-4 py-1.5': shape === Shape.Default,
+          'px-3 py-1.5': shape === Shape.Square,
+          'bg-brand-100 dark:bg-brand-700': color === Color.Primary,
+          'text-brand-500 dark:text-white': iconColor === Color.Primary,
+          'bg-gray-100 dark:bg-gray-700': color === Color.Gray,
+          'text-gray-900 dark:text-gray-400': iconColor === Color.Gray,
+          'animate-pulse bg-gray-100 text-transparent dark:bg-gray-800':
+            isSkelton,
+        }
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button