feat(bookreader): controls review 2

src/components/reader/components/ControlButtons.tsx

@@ -1,11 +1,12 @@
 import { ControlButtonsProps } from "../types";
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight, LayoutTemplate, SplitSquareVertical } from "lucide-react";
+import { ChevronLeft, ChevronRight, X, SplitSquareVertical, LayoutTemplate } from "lucide-react";
 
 export const ControlButtons = ({
   showControls,
-  onPrevious,
+  onToggleControls,
-  onNext,
+  onPreviousPage,
+  onNextPage,
   onClose,
   currentPage,
   totalPages,
@@ -14,10 +15,10 @@ export const ControlButtons = ({
 }: ControlButtonsProps) => {
   return (
     <>
-      {/* Boutons en haut */}
+      {/* Bouton mode double page */}
       <div
         className={cn(
-          "absolute top-4 left-4 flex items-center gap-2 z-30 transition-all duration-300",
+          "absolute top-4 left-4 z-30 transition-all duration-300",
           showControls ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
       >
@@ -39,12 +40,29 @@ export const ControlButtons = ({
         </button>
       </div>
 
+      {/* Bouton fermer */}
+      {onClose && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+          className={cn(
+            "absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
+            showControls ? "opacity-100" : "opacity-0 pointer-events-none"
+          )}
+          aria-label="Fermer"
+        >
+          <X className="h-6 w-6" />
+        </button>
+      )}
+
       {/* Bouton précédent */}
       {currentPage > 1 && (
         <button
           onClick={(e) => {
             e.stopPropagation();
-            onPrevious();
+            onPreviousPage();
           }}
           className={cn(
             "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
@@ -61,7 +79,7 @@ export const ControlButtons = ({
         <button
           onClick={(e) => {
             e.stopPropagation();
-            onNext();
+            onNextPage();
           }}
           className={cn(
             "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
@@ -72,36 +90,6 @@ export const ControlButtons = ({
           <ChevronRight className="h-8 w-8" />
         </button>
       )}
-
-      {/* Bouton fermer */}
-      {onClose && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose();
-          }}
-          className={cn(
-            "absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
-            showControls ? "opacity-100" : "opacity-0 pointer-events-none"
-          )}
-          aria-label="Fermer"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      )}
     </>
   );
 };

src/components/reader/types.ts

@@ -38,6 +38,9 @@ export interface ControlButtonsProps {
   onToggleControls: () => void;
   onPreviousPage: () => void;
   onNextPage: () => void;
+  onClose?: () => void;
   currentPage: number;
   totalPages: number;
+  isDoublePage: boolean;
+  onToggleDoublePage: () => void;
 }