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

app/components/button.tsx

@@ -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>
+  )
 }

app/configs/meta.ts

@@ -1 +0,0 @@
-export const HTML_TITLE = 'React Router'

app/data/dummy.ts

@@ -1,4 +1,6 @@
 export const DUMMY = {
+  title: 'React Router',
   description:
     'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
+  logo: '/images/logo.svg',
 }

app/pages/news/header-top.tsx

@@ -1,7 +1,6 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/button'
-import { HTML_TITLE } from '~/configs/meta'
 import { DUMMY } from '~/data/dummy'
 
 export const HeaderTop = () => {
@@ -12,16 +11,24 @@ export const HeaderTop = () => {
         className="h-full py-[5px]"
       >
         <img
-          src="/images/logo.svg"
-          alt={HTML_TITLE}
+          src={DUMMY.logo}
+          alt={DUMMY.title}
           className="h-full w-auto"
         />
       </Link>
       <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
         {DUMMY.description}
       </div>
-      <div className="">
-        <Button />
+      <div className="flex items-center gap-[15px]">
+        <Button>About Us</Button>
+        <Button variant="newsSecondary">Akun</Button>
+        <div className="w-[60px]">
+          <img
+            alt="language"
+            src="/flags/id.svg"
+            className="shadow-sm"
+          />
+        </div>
       </div>
     </div>
   )