56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import React from "react";
|
||
import classes from "./classes.module.scss";
|
||
import classNames from "classnames";
|
||
import Image from "next/image";
|
||
import PenICon from "@Assets/Icons/pen.svg";
|
||
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||
import Typography, { ITypo } from "../Typography";
|
||
|
||
type IProps = {
|
||
folder: IDashBoardFolder;
|
||
isDescription?: boolean;
|
||
};
|
||
|
||
export default function FolderBoxInformation(props: IProps) {
|
||
const { isDescription = false } = props;
|
||
|
||
return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
|
||
<div className={classes["content"]}>
|
||
{isDescription ?
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
|
||
<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
|
||
</div>
|
||
:
|
||
<>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
|
||
<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
|
||
</div>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
|
||
<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
|
||
</div>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
|
||
<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
|
||
</div>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
|
||
<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
|
||
</div>
|
||
</>
|
||
}
|
||
</div>
|
||
<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
|
||
</div>;
|
||
}
|
||
|
||
function formatDate(date: Date | null): string {
|
||
if (!date) return "...";
|
||
return date.toLocaleDateString("fr-FR", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
});
|
||
} |