✨ Back arrow

src/front/Components/DesignSystem/Button/index.tsx

@@ -15,11 +15,11 @@ type IProps = {
 	variant?: EButtonVariant;
 	fullwidth?: "true" | "false";
 	icon?: string;
-	iconStyle?: CSSProperties;
+	iconstyle?: CSSProperties;
 	disabled?: boolean;
 	type?: "button" | "submit";
 	isloading?: string;
-	iconPosition?: "left" | "right";
+	iconposition?: "left" | "right";
 };
 
 export default function Button(props: IProps) {
@@ -29,20 +29,20 @@ export default function Button(props: IProps) {
 		type = "button",
 		isloading = "false",
 		fullwidth = "false",
-		iconPosition = "right",
+		iconposition = "right",
 		onClick,
 		children,
 		icon,
-		iconStyle,
+		iconstyle,
 	} = props;
 
 	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
 	delete attributes.icon;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
-			{icon && iconPosition === "left" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 			{children}
-			{icon && iconPosition === "right" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 		</button>
 	);
 }

src/front/Components/Elements/BackArrow/index.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import React from "react";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import ChevronIcon from "@Assets/icons/chevron.svg";
+type IProps = {
+	url: string;
+};
+
+type IState = {};
+export default class BackArrow extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<Link href={this.props.url}>
+				<Button
+					icon={ChevronIcon}
+					iconposition={"left"}
+					iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+					variant={EButtonVariant.LINE}>
+					Retour
+				</Button>
+			</Link>
+		);
+	}
+}

src/front/Components/Layouts/AddClientToFolder/index.tsx

@@ -9,9 +9,8 @@ import { ActionMeta, MultiValue } from "react-select";
 import { IOption } from "@Front/Components/DesignSystem/Select";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Form from "@Front/Components/DesignSystem/Form";
-import ChevonIcon from "@Assets/icons/chevron.svg";
-import Link from "next/link";
 import { useRouter } from "next/router";
+import BackArrow from "@Front/Components/Elements/BackArrow";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -45,15 +44,7 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					<Link href={"/dossier/".concat(this.props.selectedFolderUid)}>
+					<BackArrow url={"/dossier/".concat(this.props.selectedFolderUid)} />
-						<Button
-							icon={ChevonIcon}
-							iconPosition={"left"}
-							iconStyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-							variant={EButtonVariant.LINE}>
-							Retour
-						</Button>
-					</Link>
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
 					<Form>
 						<div className={classes["radiobox-container"]}>

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -3,6 +3,7 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import RightImage from "@Front/Assets/images/create-folder/right-image.png";
+import BackArrow from "@Front/Components/Elements/BackArrow";
 
 type IProps = {};
 type IState = {};
@@ -16,14 +17,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 		return (
 			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
 				<div className={classes["root"]}>
-					<div className={classes["no-folder-selected"]}>
+					<BackArrow url="/" />
-						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-								Veuillez sélectionner un dossier.
-							</Typography>
-						</div>
-					</div>
 				</div>
 			</DefaultDoubleSidePage>
 		);