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:
@@ -0,0 +1,23 @@
|
||||
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
import { useGoBack } from '../../hooks/useGoBack';
|
||||
|
||||
interface Props {
|
||||
/** مقصد وقتی تاریخچهای برای برگشتن نیست (ورود مستقیم/رفرش) — معمولاً صفحهٔ لیستِ همان بخش. */
|
||||
fallback: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* دکمهٔ «بازگشت» — یک ظاهر و یک رفتار در همهٔ صفحاتی که از دل صفحهٔ دیگری باز میشوند.
|
||||
* ظاهر مرجع، همان دکمهٔ بازگشتِ صفحهٔ سرویسهاست (`cp-btn-secondary` با ارتفاع ۳۶).
|
||||
* در RTL، فلشِ «قبلی» راستسو است.
|
||||
*/
|
||||
export default function BackButton({ fallback, label = 'بازگشت' }: Props) {
|
||||
const goBack = useGoBack(fallback);
|
||||
|
||||
return (
|
||||
<button type="button" className="cp-btn-secondary" style={{ height: 36 }} onClick={goBack}>
|
||||
<ChevronRightIcon style={{ width: 16 }} /> {label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user