feat: implement BackButton component for consistent navigation

- Added BackButton component to standardize back navigation across pages.
- Integrated BackButton into various pages, replacing custom back buttons for consistency.
- Updated PageHeader to accept backTo prop for displaying BackButton when navigating from subpages.
- Created useGoBack hook to handle navigation logic, determining whether to go back in history or redirect to a fallback page.
- Added tests for BackButton and its integration with PageHeader to ensure expected behavior.
This commit is contained in:
hamed
2026-07-29 20:26:51 +03:30
parent e6267080b2
commit e0e8fbd1e4
31 changed files with 224 additions and 82 deletions
+12 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
import BackButton from './BackButton';
interface Crumb {
label: string;
@@ -12,12 +13,22 @@ interface Props {
breadcrumbs?: Crumb[];
action?: React.ReactNode;
description?: string;
/**
* صفحه از دل صفحهٔ دیگری باز می‌شود → دکمهٔ «بازگشت» بالای عنوان.
* مقدار، مقصدِ fallback است وقتی تاریخچه‌ای برای برگشتن نیست.
*/
backTo?: string;
}
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
export default function PageHeader({ title, breadcrumbs, action, description, backTo }: 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) => (