121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface TypographyProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
interface LabelProps extends TypographyProps {
|
|
htmlFor?: string;
|
|
}
|
|
|
|
// Page Headers
|
|
export const PageTitle = ({ children, className = '' }: TypographyProps) => (
|
|
<h1 className={`text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 ${className}`}>
|
|
{children}
|
|
</h1>
|
|
);
|
|
|
|
export const PageSubtitle = ({ children, className = '' }: TypographyProps) => (
|
|
<p className={`text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1 ${className}`}>
|
|
{children}
|
|
</p>
|
|
);
|
|
|
|
// Section Headers
|
|
export const SectionTitle = ({ children, className = '' }: TypographyProps) => (
|
|
<h2 className={`text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
|
|
{children}
|
|
</h2>
|
|
);
|
|
|
|
export const SectionSubtitle = ({ children, className = '' }: TypographyProps) => (
|
|
<h3 className={`text-base sm:text-lg font-medium text-gray-900 dark:text-gray-100 ${className}`}>
|
|
{children}
|
|
</h3>
|
|
);
|
|
|
|
// Card Headers
|
|
export const CardTitle = ({ children, className = '' }: TypographyProps) => (
|
|
<h3 className={`text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
|
|
{children}
|
|
</h3>
|
|
);
|
|
|
|
export const CardSubtitle = ({ children, className = '' }: TypographyProps) => (
|
|
<p className={`text-sm text-gray-600 dark:text-gray-400 ${className}`}>
|
|
{children}
|
|
</p>
|
|
);
|
|
|
|
// Stats and Values
|
|
export const StatValue = ({ children, className = '' }: TypographyProps) => (
|
|
<div className={`text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const StatLabel = ({ children, className = '' }: TypographyProps) => (
|
|
<dt className={`text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 truncate ${className}`}>
|
|
{children}
|
|
</dt>
|
|
);
|
|
|
|
// Body Text
|
|
export const BodyText = ({ children, className = '' }: TypographyProps) => (
|
|
<p className={`text-sm sm:text-base text-gray-700 dark:text-gray-300 ${className}`}>
|
|
{children}
|
|
</p>
|
|
);
|
|
|
|
export const SmallText = ({ children, className = '' }: TypographyProps) => (
|
|
<p className={`text-xs sm:text-sm text-gray-600 dark:text-gray-400 ${className}`}>
|
|
{children}
|
|
</p>
|
|
);
|
|
|
|
// Labels
|
|
export const Label = ({ children, htmlFor, className = '' }: LabelProps) => (
|
|
<label htmlFor={htmlFor} className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 ${className}`}>
|
|
{children}
|
|
</label>
|
|
);
|
|
|
|
// Form Headers with Mobile Support
|
|
interface FormHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
backButton?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const FormHeader = ({ title, subtitle, backButton, className = '' }: FormHeaderProps) => (
|
|
<div className={`space-y-3 sm:space-y-4 ${className}`}>
|
|
{/* Mobile: Stack vertically, Desktop: Side by side */}
|
|
<div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:gap-4 sm:space-y-0">
|
|
{backButton && (
|
|
<div className="flex-shrink-0">
|
|
{backButton}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<PageTitle className="break-words">{title}</PageTitle>
|
|
{subtitle && <PageSubtitle className="break-words">{subtitle}</PageSubtitle>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Page Container with consistent mobile spacing
|
|
export const PageContainer = ({ children, className = '' }: TypographyProps) => (
|
|
<div className={`p-4 sm:p-6 lg:p-8 space-y-4 sm:space-y-6 max-w-none ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
// Mobile-friendly card container
|
|
export const MobileCard = ({ children, className = '' }: TypographyProps) => (
|
|
<div className={`card p-3 sm:p-4 lg:p-6 ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|