hamed
ecdefa3c24
- Integrated TourButton component into SettingsMenuPage, SkillsPage, SmsWalletPage, StaffPage, StaffSessionDetailPage, StaffTreatmentSessionsPage, SubscriptionPage, TagsSettingsPage, TreatmentCasesPage to enhance user onboarding experience. - Created new tour definitions for appointments, clinics, staff management, financial management, and patient management, ensuring comprehensive guidance for users navigating the admin panel. - Updated documentation to reflect the addition of tours and their implementation details.
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
|
import BackButton from './BackButton';
|
|
import TourButton from './TourButton';
|
|
|
|
interface Crumb {
|
|
label: string;
|
|
to?: string;
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
breadcrumbs?: Crumb[];
|
|
action?: React.ReactNode;
|
|
description?: string;
|
|
/**
|
|
* صفحه از دل صفحهٔ دیگری باز میشود → دکمهٔ «بازگشت» بالای عنوان.
|
|
* مقدار، مقصدِ fallback است وقتی تاریخچهای برای برگشتن نیست.
|
|
*/
|
|
backTo?: string;
|
|
/** شناسهٔ تور راهنمای این صفحه؛ اگر در registry ثبت نشده باشد دکمهای نمیآید. */
|
|
tourId?: string;
|
|
/**
|
|
* محتوای صفحه نشسته است و تورِ بار اول میتواند خودکار اجرا شود.
|
|
* صفحهای که دادهاش دیر میآید، `!isLoading` بدهد تا تور روی صفحهٔ نیمهساخته نیفتد.
|
|
*/
|
|
tourReady?: boolean;
|
|
}
|
|
|
|
export default function PageHeader({ title, breadcrumbs, action, description, backTo, tourId, tourReady = true }: Props) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
|
|
<div style={{ minWidth: 0 }}>
|
|
{backTo && (
|
|
<div style={{ marginBottom: 10 }}>
|
|
<BackButton fallback={backTo} />
|
|
</div>
|
|
)}
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, fontSize: 12, color: 'var(--text-3)' }}>
|
|
{breadcrumbs.map((crumb, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <ChevronLeftIcon style={{ width: 12, height: 12 }} />}
|
|
{crumb.to ? (
|
|
<Link to={crumb.to} style={{ color: 'var(--text-3)', textDecoration: 'none' }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
|
|
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
|
|
>
|
|
{crumb.label}
|
|
</Link>
|
|
) : (
|
|
<span style={{ color: 'var(--text)', fontWeight: 600 }}>{crumb.label}</span>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</nav>
|
|
)}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }} data-tour="page-title">
|
|
<h1 className="section-title">{title}</h1>
|
|
<TourButton tourId={tourId} ready={tourReady} />
|
|
</div>
|
|
{description && (
|
|
<p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
|
|
)}
|
|
</div>
|
|
{action && <div style={{ flexShrink: 0 }} data-tour="page-action">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|