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
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { Link } from './Link'
|
|
|
|
export const Footer = () => {
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
const footerLinks = {
|
|
'About': [
|
|
{ label: 'Mission', href: '/about/mission' },
|
|
{ label: 'Team', href: '/about/team' },
|
|
{ label: 'Contact', href: '/about/contact' },
|
|
],
|
|
'Community': [
|
|
{ label: 'Blog', href: '/blog' },
|
|
{ label: 'Forum', href: '/forum' },
|
|
{ label: 'Podcast', href: '/podcast' },
|
|
],
|
|
'Resources': [
|
|
{ label: 'Knowledge Base', href: '/resources' },
|
|
{ label: 'Support', href: '/support' },
|
|
{ label: 'FAQ', href: '/faq' },
|
|
],
|
|
'Legal': [
|
|
{ label: 'Privacy Policy', href: '/legal/privacy' },
|
|
{ label: 'Terms of Service', href: '/legal/terms' },
|
|
{ label: 'Code of Conduct', href: '/legal/conduct' },
|
|
],
|
|
}
|
|
|
|
return (
|
|
<footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
{Object.entries(footerLinks).map(([category, links]) => (
|
|
<div key={category}>
|
|
<h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
|
|
{category}
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
{links.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
variant="neutral"
|
|
className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white text-sm no-underline hover:underline"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<p className="text-center text-sm text-gray-600 dark:text-gray-400">
|
|
© {currentYear} MoreThanADiagnosis. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|