4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

:sparkles page 404

Browse Source
This commit is contained in:
Max S 2024-08-26 15:45:27 +02:00
parent a36864b80b
commit 06e99a53fa
6 changed files with 116 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/front/Components/Elements/HelpBox/classes.module.scss Normal file
View File

@ -0,0 +1,5 @@
.root {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}

39
src/front/Components/Elements/HelpBox/index.tsx Normal file
View File

@ -0,0 +1,39 @@
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import classes from "./classes.module.scss";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Link from "next/link";
export type IProps = {
title: string;
description: string;
button: { text: string; link?: string; onClick?: () => void };
};
export default function HelpBox(props: IProps) {
const { title, description, button } = props;
return (
<div className={classes["root"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.TEXT_SECONDARY}>
{title}
</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
{description}
</Typography>
{button.link ? (
<Link href={button.link}>
<Button
variant={EButtonVariant.SECONDARY}
styletype={EButtonstyletype.TEXT}
size={EButtonSize.MD}
onClick={button.onClick}>
Contactez le support
</Button>
</Link>
) : (
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}>
Contactez le support
</Button>
)}
</div>
);
}

6
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -39,12 +39,6 @@
display: flex;
gap: var(--spacing-lg, 24px);
.box {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
@media screen and (max-width: 600px) {
flex-direction: column;
}

31
src/front/Components/Layouts/Folder/index.tsx
View File

@ -1,9 +1,12 @@
import LogoIcon from "@Assets/logo_small_blue.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import HelpBox from "@Front/Components/Elements/HelpBox";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import useUser from "@Front/Hooks/useUser";
import { DocumentIcon } from "@heroicons/react/24/outline";
import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import Image from "next/image";
@ -12,8 +15,6 @@ import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import classes from "./classes.module.scss";
import useUser from "@Front/Hooks/useUser";
import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
export default function Folder() {
const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
@ -80,13 +81,11 @@ export default function Folder() {
</div>
<div className={classes["help-container"]}>
<div className={classes["box"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
Accéder aux guides
</Button>
</div>
<HelpBox
title="Besoin d'aide ?"
description="Consultez nos guides pour bien démarrer."
button={{ text: "Accéder aux guides" }}
/>
<Separator
className={classes["desktop"]}
@ -96,13 +95,11 @@ export default function Folder() {
/>
<Separator className={classes["mobile"]} direction={ESeperatorDirection.HORIZONTAL} color={ESeperatorColor.LIGHT} />
<div className={classes["box"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
Contactez le support
</Button>
</div>
<HelpBox
title="Vous avez des questions ?"
description="Notre équipe de support est là pour vous aider."
button={{ text: "Contactez le support" }}
/>
</div>
</div>
</div>

39
src/front/Components/Layouts/PageNotFound/classes.module.scss
View File

@ -1,21 +1,34 @@
@import "@Themes/constants.scss";
@import "@Themes/animation.scss";
@import "@Themes/constants.scss";
.root {
height: 100%;
width: 100%;
margin: 80px auto;
width: 474px;
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 32px);
.content {
@media (max-width: $screen-s) {
width: 100%;
margin: auto;
.text {
margin: 32px 0;
}
@media(max-width: $screen-s) {
text-align: center;
}
padding: var(--spacing-md, 16px);
}
}
.content {
display: flex;
padding: var(--spacing-xl, 32px) var(--spacing-lg, 24px);
flex-direction: column;
gap: var(--spacing-lg, 24px);
border-radius: var(--radius-rounded, 16px);
background: var(--background-primary, #fff);
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
.text {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
}
}

40
src/front/Components/Layouts/PageNotFound/index.tsx
View File

@ -1,27 +1,51 @@
import backgroundImage from "@Assets/images/background_refonte.svg";
import LogoIcon from "@Assets/logo_small_blue.svg";
import Button from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import HelpBox from "@Front/Components/Elements/HelpBox";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Module from "@Front/Config/Module";
import Image from "next/image";
import Link from "next/link";
import BasePage from "../Base";
import classes from "./classes.module.scss";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import backgroundImage from "@Assets/images/404-background-image.jpeg";
export default class PageNotFound extends BasePage {
public override render(): JSX.Element {
return (
<DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader>
<div className={classes["root"]}>
<div className={classes["content"]}>
<Typography typo={ETypo.DISPLAY_LARGE}>Erreur 404</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} className={classes["text"]}>
La page que vous recherchez semble introuvable.
<div className={classes["title-container"]}>
<Image src={LogoIcon} alt="logo" width={56} />
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
Oups ! Page introuvable
</Typography>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_PRIMARY}>
Il semble que la page que vous recherchez n'existe pas ou a été déplacée.
</Typography>
</div>
<div className={classes["content"]}>
<div className={classes["text"]}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.TEXT_PRIMARY}>
Pas de panique ! Voici ce que vous pouvez faire :
</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
• Retourner à la page d'accueil en cliquant sur le bouton ci-dessous.
</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
• Contactez-nous si vous avez besoin d'aide.
</Typography>
</div>
<Link href={Module.getInstance().get().modules.pages.Home.props.path}>
<Button>Retour à l'accueil</Button>
</Link>
</div>
<HelpBox
title="Vous avez des questions ?"
description="Notre équipe de support est là pour vous aider."
button={{ text: "Contactez le support" }}
/>
</div>
</DefaultDoubleSidePage>
);