feat: refactor news components and add news detail layout

app/components/ui/button.tsx

@@ -1,10 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority'
-import type {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  MouseEventHandler,
-  ReactNode,
-} from 'react'
+import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 const buttonVariants = cva(
@@ -16,14 +11,6 @@ const buttonVariants = cva(
         newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
         newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
         icon: '',
-        // 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]',
@@ -40,34 +27,38 @@ const buttonVariants = cva(
   },
 )
 
-type TProperties = {
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type']
-  onClick?: MouseEventHandler<HTMLButtonElement>
-  className?: HTMLAttributes<HTMLButtonElement>['className']
-  disabled?: boolean
+type ButtonBaseProperties = {
   children: ReactNode
   variant?: VariantProps<typeof buttonVariants>['variant']
   size?: VariantProps<typeof buttonVariants>['size']
+  className?: string
 }
 
-export const Button = (properties: TProperties) => {
-  const {
-    type = 'button',
-    onClick,
-    className,
-    disabled,
-    children,
-    variant,
-    size,
-  } = properties
+type PolymorphicReference<C extends ElementType> =
+  ComponentPropsWithoutRef<C>['ref']
+
+type ButtonProperties<C extends ElementType> = ButtonBaseProperties & {
+  as?: C
+  ref?: PolymorphicReference<C>
+} & Omit<ComponentPropsWithoutRef<C>, keyof ButtonBaseProperties>
+
+export const Button = <C extends ElementType = 'button'>({
+  as,
+  children,
+  variant,
+  size,
+  className,
+  ...properties
+}: ButtonProperties<C>) => {
+  const Component = as || 'button'
+  const classes = twMerge(buttonVariants({ variant, size, className }))
+
   return (
-    <button
-      type={type}
-      onClick={onClick}
-      className={twMerge(buttonVariants({ variant, size, className }))}
-      disabled={disabled}
+    <Component
+      className={classes}
+      {...properties}
     >
       {children}
-    </button>
+    </Component>
   )
 }