From 3e5ca6efc76025aea51b477d9bda0dddf7424967 Mon Sep 17 00:00:00 2001
From: paullfhc <leflohicpaul@gmail.com>
Date: Tue, 17 Dec 2024 21:59:26 +0100
Subject: [PATCH] =?UTF-8?q?ensemble=20des=20modifications=20aport=C3=A9es?=
 =?UTF-8?q?=20=C3=A0=20la=20page=20d'impl=C3=A9mentation=20de=20la=20check?=
 =?UTF-8?q?box?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ssr-testing/app/checkbox/page.tsx | 36 +++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/ssr-testing/app/checkbox/page.tsx b/ssr-testing/app/checkbox/page.tsx
index 363287443..e1f29217c 100644
--- a/ssr-testing/app/checkbox/page.tsx
+++ b/ssr-testing/app/checkbox/page.tsx
@@ -1,10 +1,38 @@
+'use client';
+
 import * as React from 'react';
 import * as Checkbox from '@radix-ui/react-checkbox';
 
 export default function Page() {
+  // État pour le div
+  const [isDivChecked, setIsDivChecked] = React.useState(false);
+
+  // État pour la case à cocher
+  const [isCheckboxChecked, setIsCheckboxChecked] = React.useState(false);
+
+  // Fonction pour alterner l’état du div
+  const handleDivClick = () => {
+    console.log('Div clicked:', !isDivChecked);
+    setIsDivChecked((prev) => !prev);
+  };
+
+  // Fonction pour alterner l’état de la checkbox
+  const handleCheckedChange = (newChecked: boolean) => {
+    console.log('Checkbox checked:', newChecked);
+    setIsCheckboxChecked(newChecked);
+  };
+
   return (
-    <Checkbox.Root>
-      [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
-    </Checkbox.Root>
+    <form>
+      <div onClick={handleDivClick}> {/* Alterne l’état du div */}
+        <Checkbox.Root 
+          checked={isCheckboxChecked} 
+          onCheckedChange={handleCheckedChange} // Alterne l’état de la checkbox
+        >
+          [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
+        </Checkbox.Root>
+        <span>test</span>
+      </div>
+    </form>
   );
-}
+}
\ No newline at end of file