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:
@@ -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) => (
|
||||
|
||||
Reference in New Issue
Block a user