From 2983432be231705947b67a3949fdb0fd780a7120 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 21 Apr 2025 13:18:48 +0200
Subject: [PATCH] feat: Update Iframe component class attribute

---
 app/components/Iframe.tsx                     | 16 +++++----
 app/pages/certifications/dwwm/at1/+Page.mdx   | 33 ++++++++++++++++---
 .../certifications/dwwm/at1/cp2/+Page.mdx     |  2 +-
 app/pages/certifications/dwwm/at2/+Page.mdx   | 32 +++++++++++++++---
 4 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/app/components/Iframe.tsx b/app/components/Iframe.tsx
index e7a91ae..3791435 100644
--- a/app/components/Iframe.tsx
+++ b/app/components/Iframe.tsx
@@ -10,12 +10,14 @@ type IframeProps = {
 
 export default function Iframe(props: IframeProps) {
 	return (
-		<iframe
-			src={props.src}
-			class={clsx("max-w-full pointer-events-none", props.class)}
-			width={props.width}
-			height={props.height}
-			title={props.title}
-		/>
+		<div class={clsx("max-w-full pointer-events-none w-full")}>
+			<iframe
+				src={props.src}
+				width={props.width}
+				height={props.height}
+				title={props.title}
+				class={props.class}
+			/>
+		</div>
 	);
 }
diff --git a/app/pages/certifications/dwwm/at1/+Page.mdx b/app/pages/certifications/dwwm/at1/+Page.mdx
index 2862f99..e7631bf 100644
--- a/app/pages/certifications/dwwm/at1/+Page.mdx
+++ b/app/pages/certifications/dwwm/at1/+Page.mdx
@@ -4,6 +4,8 @@ description: Synthèse et explications des attentes relatives à l'activité typ
 tags: [DWWM]
 ---
 
+import QuickLinks from "@/components/QuickLinks";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
@@ -17,7 +19,30 @@ Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétence
 
 Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
 
-- **CP 1** : Installer et configurer son environnement de travail en fonction du projet web ou web mobile
-- **CP 2** : Maquetter des interfaces utilisateur web ou web mobile
-- **CP 3** : Réaliser des interfaces utilisateur statiques web ou web mobile
-- **CP 4** : Développer la partie dynamique des interfaces utilisateur web ou web mobile
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 1"
+    href="at1/cp1"
+    description="Installer et configurer son environnement de travail en fonction du projet web ou web mobile"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 2"
+    href="at1/cp2"
+    description="Maquetter des interfaces utilisateur web ou web mobile"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 3"
+    href="at1/cp3"
+    description="Réaliser des interfaces utilisateur statiques web ou web mobile"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 4"
+    href="at1/cp4"
+    description="Développer la partie dynamique des interfaces utilisateur web ou web mobile"
+    icon="presets"
+  />
+</QuickLinks>
+
diff --git a/app/pages/certifications/dwwm/at1/cp2/+Page.mdx b/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
index 9f566ed..4352dc3 100644
--- a/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
+++ b/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
@@ -17,7 +17,7 @@ import Iframe from "@/components/Iframe";
 Pour cette compétence, tu vas devoir réaliser des maquettes d'interfaces utilisateur.  
 Mais par maquettage, on ne parle pas de maquette en papier ou en carton, mais bien de maquettes numériques.
 
-<Iframe src="https://giphy.com/embed/28n0C19zo9OOvHnYww" width="480" height="269" className="mx-auto" />
+<Iframe src="https://giphy.com/embed/28n0C19zo9OOvHnYww" width="480" height="269" class="mx-auto rounded-md" />
 
 ... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
 
diff --git a/app/pages/certifications/dwwm/at2/+Page.mdx b/app/pages/certifications/dwwm/at2/+Page.mdx
index 01cb625..b942eb8 100644
--- a/app/pages/certifications/dwwm/at2/+Page.mdx
+++ b/app/pages/certifications/dwwm/at2/+Page.mdx
@@ -4,6 +4,8 @@ description: Synthèse et explications des attentes relatives à l'activité typ
 tags: [DWWM]
 ---
 
+import QuickLinks from "@/components/QuickLinks";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
@@ -17,7 +19,29 @@ Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétence
 
 Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
 
-- **CP 5** : Mettre en place une base de données relationnelle
-- **CP 6** : Développer des composants d'accès aux données SQL et NoSQL
-- **CP 7** : Développer des composants métier coté serveur
-- **CP 8** : Documenter le déploiement d'une application dynamique web ou web mobile
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 5"
+    href="at2/cp5"
+    description="Mettre en place une base de données relationnelle"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 6"
+    href="at2/cp6"
+    description="Développer des composants d'accès aux données SQL et NoSQL"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 7"
+    href="at2/cp7"
+    description="Développer des composants métier coté serveur"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 8"
+    href="at2/cp8"
+    description="Documenter le déploiement d'une application dynamique web ou web mobile"
+    icon="presets"
+  />
+</QuickLinks>
\ No newline at end of file