hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface Crumb {
|
|
label: string;
|
|
to?: string;
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
breadcrumbs?: Crumb[];
|
|
action?: React.ReactNode;
|
|
description?: string;
|
|
}
|
|
|
|
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
|
|
return (
|
|
<div className="flex items-start justify-between mb-6 gap-4">
|
|
<div className="min-w-0">
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
|
|
{breadcrumbs.map((crumb, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
|
|
{crumb.to ? (
|
|
<Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
|
|
{crumb.label}
|
|
</Link>
|
|
) : (
|
|
<span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</nav>
|
|
)}
|
|
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
|
|
{description && (
|
|
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
|
|
)}
|
|
</div>
|
|
{action && <div className="shrink-0">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|