61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Button, type ButtonProps } from '@/components/ui/Button';
|
|
import { cn } from '@/utils/utils';
|
|
|
|
export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
|
|
/** Route explicite (ex: "/support"). Si omis, fait un retour arrière dans l'historique (-1) */
|
|
to?: string;
|
|
/** Texte par défaut du bouton */
|
|
label?: string;
|
|
/** Fonction personnalisée au clic */
|
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
}
|
|
|
|
export const BackButton: React.FC<BackButtonProps> = ({
|
|
to,
|
|
label = "Retour",
|
|
onClick,
|
|
variant = "ghost", // Style par défaut : ultra discret sur la surface Neumorphic
|
|
size = "sm",
|
|
children,
|
|
className,
|
|
...props
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
|
|
// Logique du clic (priorité : onClick perso > destination 'to' > retour historique)
|
|
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
if (onClick) {
|
|
onClick(e);
|
|
} else if (to) {
|
|
navigate(to);
|
|
} else {
|
|
navigate(-1);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant={variant}
|
|
size={size}
|
|
onClick={handleClick}
|
|
leftIcon={
|
|
<svg
|
|
className="w-4 h-4 transition-transform duration-200 group-hover:-translate-x-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
}
|
|
className={cn("group", className)}
|
|
{...props}
|
|
>
|
|
{children || label}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default BackButton; |