✨ My account done (#12)

src/front/Components/Layouts/MyAccount/classes.module.scss

@@ -0,0 +1,27 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.title {
+		margin-top: 24px;
+	}
+
+	.parts-container {
+		display: flex;
+		gap: 64px;
+		margin-top: 32px;
+
+		@media (max-width: $screen-m) {
+			flex-direction: column;
+		}
+		.part {
+			flex: 1;
+
+			.form-container {
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+				margin-top: 32px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,61 @@
+import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import Base from "@Front/Components/Layouts/Base";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import React from "react";
+
+import classes from "./classes.module.scss";
+
+type IProps = {};
+type IState = {};
+
+export default class MyAccount extends Base<IProps, IState> {
+	public override render(): JSX.Element {
+		return (
+			<DefaultTemplate title={"Mon compte"}>
+				<div className={classes["root"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						Mon compte
+					</Typography>
+					<div className={classes["parts-container"]}>
+						<div className={classes["part"]}>
+							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+								Mes informations
+							</Typography>
+							<Form onSubmit={this.onFormSubmit}>
+								<div className={classes["form-container"]}>
+									<InputField name="name" fakeplaceholder="Nom" type="text" />
+									<InputField name="surname" fakeplaceholder="Prénom" type="text" />
+									<InputField name="email" fakeplaceholder="E-mail" type="email" />
+									<InputField name="phone" fakeplaceholder="Numéro de téléphone" type="tel" />
+								</div>
+							</Form>
+						</div>
+						<div className={classes["part"]}>
+							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+								Mon office
+							</Typography>
+							<Form onSubmit={this.onFormSubmit}>
+								<div className={classes["form-container"]}>
+									<InputField name="office_denomination" fakeplaceholder="Dénomination de l'office" type="text" />
+									<InputField name="crpcen" fakeplaceholder="CRPCEN" type="number" />
+									<InputField name="cp_address" fakeplaceholder="Adresse CP" type="text" />
+									<InputField name="city" fakeplaceholder="Ville" type="text" />
+								</div>
+							</Form>
+						</div>
+					</div>
+				</div>
+			</DefaultTemplate>
+		);
+	}
+
+	private onFormSubmit(
+		e: React.FormEvent<HTMLFormElement> | null,
+		values: {
+			[key: string]: string;
+		},
+		onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
+	) {}
+}

src/pages/my-account/index.tsx

@@ -0,0 +1,5 @@
+import MyAccount from "@Front/Components/Layouts/MyAccount";
+
+export default function Route() {
+	return <MyAccount />;
+}