build reusable button an dinput componenets

frontend/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Loader2 } from 'lucide-react'
 
 import { cn } from "@/lib/utils"
 
@@ -37,17 +38,25 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  loading?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
+    const isDisabled = loading || props.disabled
+
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        aria-busy={loading}
+        disabled={isDisabled}
         {...props}
-      />
+      >
+        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        {props.children}
+      </Comp>
     )
   }
 )

frontend/components/ui/input.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  id: string
+  label?: string
+  error?: string | undefined
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ id, label, error, className = '', ...props }, ref) => {
+    const describedBy = error ? `${id}-error` : undefined
+
+    return (
+      <div className={cn('flex flex-col gap-1')}>
+        {label && (
+          <label htmlFor={id} className="text-sm font-medium text-gray-700">
+            {label}
+          </label>
+        )}
+
+        <input
+          id={id}
+          ref={ref}
+          className={cn(
+            'w-full rounded-lg border px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            error ? 'border-red-300 focus-visible:ring-red-500' : 'border-gray-300',
+            className
+          )}
+          aria-invalid={!!error}
+          aria-describedby={describedBy}
+          {...props}
+        />
+
+        {error && (
+          <p id={`${id}-error`} className="text-xs text-red-500 mt-1">
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+Input.displayName = 'Input'