ui-patterns

UI Patterns and Components Guide

Overview

This project follows consistent UI patterns for authentication flows, form handling, and user feedback. All components use modern React patterns with TypeScript and Tailwind CSS.

Form Components and Patterns

State Management

Uses custom hook src/hooks/use-object-state.ts:

const [formData, setFormData] = useObjectState({
  email: "",
  password: "",
  otp: ""
});

// Update specific fields
setFormData({ email: "[email protected]" });

Resend Cooldown Hook

Custom hook src/hooks/use-resend-cooldown.ts:

const {
  isOnCooldown,
  formatCooldownTime,
  startCooldown,
} = useResendCooldown();

// Usage in component
{isOnCooldown 
  ? `Resend in ${formatCooldownTime()}`
  : "Didn't receive the code? Resend"
}

Authentication UI Components

Multi-Step Forms

Pattern used in src/app/(auth)/sign-up/page.tsx:

• Step-based navigation with progress indicators
• Back button functionality with proper state management
• Conditional rendering based on current step
• Form validation at each step

OTP Input Fields

Standardized OTP input pattern:

<Input
  type="text"
  placeholder="000000"
  value={state.otp}
  onChange={(e) => setState({ 
    otp: e.target.value.replace(/\D/g, "").slice(0, 6) 
  })}
  maxLength={6}
  className="text-center text-lg tracking-widest"
/>

Loading States

Consistent loading pattern with Lucide icons:

<Button disabled={loading}>
  {loading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
  Button Text
</Button>

Card Layout Pattern

Standard Auth Card

Used across all auth pages:

<Card className="w-full max-w-md">
  <CardHeader className="space-y-1">
    <CardTitle className="text-2xl font-bold tracking-tight">
      Page Title
    </CardTitle>
    <CardDescription>
      Page description
    </CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    {/* Form content */}
  </CardContent>
</Card>