9232ebe294
Implemented complete design system and foundational infrastructure: **Design System Components:** - Button (all variants: primary, secondary, ghost, danger) - Input & Textarea (with validation and error states) - Card (elevated, outlined, flat variants) - Modal/Dialog (with focus trap and accessibility) - Avatar (with fallback initials) - Badge (all color variants) - Form helpers (FormField, Checkbox, Select) - Link component with Next.js integration - Navigation (Header, Footer with responsive design) **Layouts:** - MainLayout (with Header/Footer for public pages) - AuthLayout (minimal layout for auth flows) - DashboardLayout (with sidebar navigation) **Hooks & Utilities:** - useAuth() - authentication state management - useApi() - API calls with loading/error states - useLocalStorage() - persistent state management - apiClient - Axios instance with token refresh - authStore - Zustand store for auth state **Configuration:** - Tailwind config with design tokens - Dark mode support via CSS variables - Global styles with accessibility focus - WCAG 2.2 AA+ compliant focus indicators All components follow accessibility best practices with proper ARIA labels, keyboard navigation, and screen reader support. Job ID: MTAD-IMPL-2025-11-18-CL
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { Link } from '../common/Link'
|
|
|
|
export interface AuthLayoutProps {
|
|
children: React.ReactNode
|
|
title?: string
|
|
subtitle?: string
|
|
}
|
|
|
|
export const AuthLayout = ({ children, title, subtitle }: AuthLayoutProps) => {
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
|
|
{/* Simple header with logo */}
|
|
<header className="py-6">
|
|
<div className="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
|
|
<Link href="/" variant="neutral" className="no-underline">
|
|
<h1 className="text-2xl font-bold text-primary-600 dark:text-primary-400 text-center">
|
|
MoreThanADiagnosis
|
|
</h1>
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="w-full max-w-md space-y-8">
|
|
{/* Title and subtitle */}
|
|
{(title || subtitle) && (
|
|
<div className="text-center">
|
|
{title && (
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
{title}
|
|
</h2>
|
|
)}
|
|
{subtitle && (
|
|
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Form container */}
|
|
<div className="bg-white dark:bg-gray-800 py-8 px-6 shadow-lg rounded-lg">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Simple footer */}
|
|
<footer className="py-6">
|
|
<div className="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
|
|
<p className="text-center text-sm text-gray-600 dark:text-gray-400">
|
|
© {new Date().getFullYear()} MoreThanADiagnosis. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|