feat: enhance Button component with variants and sizes; update HeaderTop to use DUMMY data

2025-02-01 00:43:21 +08:00
parent f8a87019af
commit d2534bd94e
8 changed files with 136 additions and 9 deletions
@@ -1,3 +1,71 @@
-export const Button = () => {
-  return <div>Button</div>
+import { cva, type VariantProps } from 'class-variance-authority'
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react'
+import { twMerge } from 'tailwind-merge'
+
+const buttonVariants = cva(
+  'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
+        newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
+        // destructive:
+        //   'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        // outline:
+        //   'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        // secondary:
+        //   'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        // ghost: 'hover:bg-accent hover:text-accent-foreground',
+        // link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-[50px] w-[150px]',
+        block: 'h-[50px] w-full',
+        // sm: 'h-8 rounded-md px-3 text-xs',
+        // lg: 'h-10 rounded-md px-8',
+        // icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'newsPrimary',
+      size: 'default',
+    },
+  },
+)
+
+type TProperties = {
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type']
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  className?: HTMLAttributes<HTMLButtonElement>['className']
+  disabled?: boolean
+  children: ReactNode
+  variant?: VariantProps<typeof buttonVariants>['variant']
+  size?: VariantProps<typeof buttonVariants>['size']
+}
+
+export const Button = (properties: TProperties) => {
+  const {
+    type = 'button',
+    onClick,
+    className,
+    disabled,
+    children,
+    variant,
+    size,
+  } = properties
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className={twMerge(buttonVariants({ variant, size, className }))}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
 }