init

2026-05-20 13:32:00 +00:00 · 2025-09-26 11:06:31 +07:00
parent a5524686a6
commit 2e1b0fef2b
36 changed files with 8716 additions and 79 deletions
@@ -0,0 +1,84 @@
+import react, { JSX } from 'react';
+
+import Link from 'next/link';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface ButtonProps extends react.ComponentProps<'button'> {
+  variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
+  color?: Color;
+  href?: string;
+  isLoading?: boolean;
+}
+
+const Button = ({
+  children,
+  type,
+  href,
+  variant,
+  color,
+  isLoading,
+  className,
+  disabled,
+  onClick,
+}: ButtonProps) => {
+  const btnBaseClassName = cn(
+    'btn',
+    {
+      'btn-soft': variant === 'soft',
+      'btn-outline': variant === 'outline',
+      'btn-dash': variant === 'dash',
+      'btn-ghost': variant === 'ghost',
+      'btn-link': variant === 'link',
+      'btn-active': variant === 'active',
+
+      'btn-primary': color === 'primary',
+      'btn-secondary': color === 'secondary',
+      'btn-accent': color === 'accent',
+      'btn-neutral': color === 'neutral',
+      'btn-info': color === 'info',
+      'btn-success': color === 'success',
+      'btn-warning': color === 'warning',
+      'btn-error': color === 'error',
+    },
+    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+  );
+
+  return (
+    <>
+      {!href && (
+        <button
+          type={type}
+          onClick={onClick}
+          disabled={disabled}
+          className={cn(
+            btnBaseClassName,
+            'disabled:pointer-events-auto! disabled:cursor-not-allowed!',
+            className
+          )}
+        >
+          {!isLoading && children}
+          {isLoading && <span className='loading loading-dots loading-md' />}
+        </button>
+      )}
+
+      {href && (
+        <Link
+          href={disabled ? '#' : href}
+          aria-disabled={disabled}
+          className={cn(
+            btnBaseClassName,
+            { 'pointer-events-auto cursor-not-allowed': disabled },
+            className
+          )}
+        >
+          {!isLoading && children}
+          {isLoading && <span className='loading loading-dots loading-xl' />}
+        </Link>
+      )}
+    </>
+  );
+};
+
+export default Button;