✨ Preview file (#13)

src/front/Components/DesignSystem/FilePreview/classes.module.scss

@@ -0,0 +1,16 @@
+.root {
+	height: inherit;
+	.file-container {
+		height: inherit;
+		.image {
+			width: 100%;
+			height: inherit;
+			object-fit: contain;
+		}
+
+		.pdf {
+			width: 100%;
+			height: inherit;
+		}
+	}
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+
+import Typography, { ITypo, ITypoColor } from "../Typography";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	href: string;
+};
+type IState = {};
+
+export default class FilePreview extends React.Component<IProps, IState> {
+	override render() {
+		const type = this.props.href.split(".").pop();
+		return (
+			<div className={classes["root"]}>
+				{!type && (
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+						Erreur lors du chargement du fichier
+					</Typography>
+				)}
+				{type && (
+					<div className={classes["file-container"]}>
+						{type === "pdf" && (
+							<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
+						)}
+						{type !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
+					</div>
+				)}
+			</div>
+		);
+	}
+}

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

@@ -1,6 +1,7 @@
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
+import FilePreview from "@Front/Components/DesignSystem/FilePreview";
 import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
 import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
@@ -268,6 +269,18 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							<FolderList folders={folders} />
 						</div>
 					</div>
+
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>Preview Image/Pdf</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<div style={{ height: "500px" }}>
+								<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
+							</div>
+							<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Vgs_Vr_Mt_TDY_Xme8qhw8quiin_Co_Bo_FBA_Vc9k6_H2d1_Bh_UU_162d84281d.jpeg" />
+						</div>
+					</div>
 				</div>
 			</DefaultTemplate>
 		);