Initial commit

app/components/base/button/add-button.tsx

@@ -0,0 +1,22 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { RiAddLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+interface Props {
+  className?: string
+  onClick: () => void
+}
+
+const AddButton: FC<Props> = ({
+  className,
+  onClick,
+}) => {
+  return (
+    <div className={cn(className, 'p-1 rounded-md cursor-pointer hover:bg-state-base-hover select-none')} onClick={onClick}>
+      <RiAddLine className='w-4 h-4 text-text-tertiary' />
+    </div>
+  )
+}
+export default React.memo(AddButton)

app/components/base/button/index.css

@@ -0,0 +1,112 @@
+@tailwind components;
+
+@layer components {
+  .btn {
+    @apply inline-flex justify-center items-center cursor-pointer whitespace-nowrap;
+  }
+
+  .btn-disabled {
+    @apply cursor-not-allowed;
+  }
+
+  .btn-small {
+    @apply px-2 h-6 rounded-md text-xs font-medium;
+  }
+
+  .btn-medium {
+    @apply px-3.5 h-8 rounded-lg text-[13px] leading-4 font-medium;
+  }
+
+  .btn-large {
+    @apply px-4 h-9 rounded-[10px] text-sm font-semibold;
+  }
+
+  .btn-primary {
+    @apply shadow bg-components-button-primary-bg border-components-button-primary-border hover:bg-components-button-primary-bg-hover hover:border-components-button-primary-border-hover text-components-button-primary-text;
+  }
+
+  .btn-primary.btn-destructive {
+    @apply bg-components-button-destructive-primary-bg border-components-button-destructive-primary-border hover:bg-components-button-destructive-primary-bg-hover hover:border-components-button-destructive-primary-border-hover text-components-button-destructive-primary-text;
+  }
+
+  .btn-primary.btn-disabled {
+    @apply shadow-none bg-components-button-primary-bg-disabled border-components-button-primary-border-disabled text-components-button-primary-text-disabled;
+  }
+
+  .btn-primary.btn-destructive.btn-disabled {
+    @apply shadow-none bg-components-button-destructive-primary-bg-disabled border-components-button-destructive-primary-border-disabled text-components-button-destructive-primary-text-disabled;
+  }
+
+  .btn-secondary {
+    @apply border-[0.5px] shadow-xs bg-components-button-secondary-bg border-components-button-secondary-border hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover text-components-button-secondary-text;
+  }
+
+  .btn-secondary.btn-disabled {
+    @apply bg-components-button-secondary-bg-disabled border-components-button-secondary-border-disabled text-components-button-secondary-text-disabled;
+  }
+
+  .btn-secondary.btn-destructive {
+    @apply bg-components-button-destructive-secondary-bg border-components-button-destructive-secondary-border hover:bg-components-button-destructive-secondary-bg-hover hover:border-components-button-destructive-secondary-border-hover text-components-button-destructive-secondary-text;
+  }
+
+  .btn-secondary.btn-destructive.btn-disabled {
+    @apply bg-components-button-destructive-secondary-bg-disabled border-components-button-destructive-secondary-border-disabled text-components-button-destructive-secondary-text-disabled;
+  }
+
+
+  .btn-secondary-accent {
+    @apply border-[0.5px] shadow-xs bg-components-button-secondary-bg border-components-button-secondary-border hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover text-components-button-secondary-accent-text;
+  }
+
+  .btn-secondary-accent.btn-disabled {
+    @apply bg-components-button-secondary-bg-disabled border-components-button-secondary-border-disabled text-components-button-secondary-accent-text-disabled;
+  }
+
+  .btn-warning {
+    @apply bg-components-button-destructive-primary-bg border-components-button-destructive-primary-border hover:bg-components-button-destructive-primary-bg-hover hover:border-components-button-destructive-primary-border-hover text-components-button-destructive-primary-text;
+  }
+
+  .btn-warning.btn-disabled {
+    @apply bg-components-button-destructive-primary-bg-disabled border-components-button-destructive-primary-border-disabled text-components-button-destructive-primary-text-disabled;
+  }
+
+  .btn-tertiary {
+    @apply bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover text-components-button-tertiary-text;
+  }
+
+  .btn-tertiary.btn-disabled {
+    @apply bg-components-button-tertiary-bg-disabled text-components-button-tertiary-text-disabled;
+  }
+
+  .btn-tertiary.btn-destructive {
+    @apply bg-components-button-destructive-tertiary-bg hover:bg-components-button-destructive-tertiary-bg-hover text-components-button-destructive-tertiary-text;
+  }
+
+  .btn-tertiary.btn-destructive.btn-disabled {
+    @apply bg-components-button-destructive-tertiary-bg-disabled text-components-button-destructive-tertiary-text-disabled;
+  }
+
+  .btn-ghost {
+    @apply hover:bg-components-button-ghost-bg-hover text-components-button-ghost-text;
+  }
+
+  .btn-ghost.btn-disabled {
+    @apply text-components-button-ghost-text-disabled;
+  }
+
+  .btn-ghost.btn-destructive {
+    @apply hover:bg-components-button-destructive-ghost-bg-hover text-components-button-destructive-ghost-text;
+  }
+
+  .btn-ghost.btn-destructive.btn-disabled {
+    @apply text-components-button-destructive-ghost-text-disabled;
+  }
+
+  .btn-ghost-accent {
+    @apply hover:bg-state-accent-hover text-components-button-secondary-accent-text;
+  }
+
+  .btn-ghost-accent.btn-disabled {
+    @apply text-components-button-secondary-accent-text-disabled;
+  }
+}

app/components/base/button/index.tsx

@@ -0,0 +1,60 @@
+import type { CSSProperties } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import Spinner from '../spinner'
+import classNames from '@/utils/classnames'
+const buttonVariants = cva(
+  'btn disabled:btn-disabled',
+  {
+    variants: {
+      variant: {
+        'primary': 'btn-primary',
+        'warning': 'btn-warning',
+        'secondary': 'btn-secondary',
+        'secondary-accent': 'btn-secondary-accent',
+        'ghost': 'btn-ghost',
+        'ghost-accent': 'btn-ghost-accent',
+        'tertiary': 'btn-tertiary',
+      },
+      size: {
+        small: 'btn-small',
+        medium: 'btn-medium',
+        large: 'btn-large',
+      },
+    },
+    defaultVariants: {
+      variant: 'secondary',
+      size: 'medium',
+    },
+  },
+)
+
+export type ButtonProps = {
+  destructive?: boolean
+  loading?: boolean
+  styleCss?: CSSProperties
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, destructive, loading, styleCss, children, ...props }, ref) => {
+    return (
+      <button
+        type='button'
+        className={classNames(
+          buttonVariants({ variant, size, className }),
+          destructive && 'btn-destructive',
+        )}
+        ref={ref}
+        style={styleCss}
+        {...props}
+      >
+        {children}
+        {loading && <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />}
+      </button>
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export default Button
+export { Button, buttonVariants }