modal for cubes responsive

bryanlundberg · Nov 5, 2023 · bfc0815 · bfc0815
1 parent c60bce9
commit bfc0815
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 41 deletions.
diff --git a/src/components/cubes/CheckboxImage.tsx b/src/components/cubes/CheckboxImage.tsx
@@ -18,25 +18,28 @@ export default function CheckboxImage({
 }) {
   return (
     <>
-      <input
-        type="radio"
-        id={id}
-        name="category"
-        value={value}
-        className="hidden peer"
-        required
-      />
-      <label
-        htmlFor={id}
-        onClick={() => handleClickRadio && handleClickRadio(value)}
-        className={`mx-auto cursor-pointer ${
+      <div
+        className={`mx-auto cursor-pointer w-20 h-20 sm:w-22 sm:h-22 md:w-32 md:h-32 ${
           selectedCategory === value
             ? "outline outline-neutral-700 rounded-sm"
             : "bg-transparent"
         }`}
       >
-        <Image src={src} alt={alt} />
-      </label>
+        <input
+          type="radio"
+          id={id}
+          name="category"
+          value={value}
+          className="hidden peer"
+          required
+        />
+        <label
+          htmlFor={id}
+          onClick={() => handleClickRadio && handleClickRadio(value)}
+        >
+          <Image src={src} alt={alt} />
+        </label>
+      </div>
     </>
   );
 }
diff --git a/src/components/cubes/Modal.tsx b/src/components/cubes/Modal.tsx
@@ -5,7 +5,6 @@ import genId from "@/lib/genId";
 import translation from "@/translations/global.json";
 import useModalCube from "@/hooks/useModalCube";
 import { useCubesModalStore } from "@/store/CubesModalStore";
-import { useState } from 'react';
 
 export default function Modal() {
   const { editingCube } = useCubesModalStore();
@@ -15,7 +14,6 @@ export default function Modal() {
     handleWriteCubeName,
     handleCreateCube,
     handleEditCube,
-    handleDeleteCube,
     handleCloseModal,
     selectedCategory,
     cubeName,
@@ -24,7 +22,7 @@ export default function Modal() {
     confirmDelete,
     cancelDelete,
     showDeleteConfirmation,
-    deleteConfirmationMessage
+    deleteConfirmationMessage,
   } = useModalCube();
   return (
     <>
@@ -92,7 +90,7 @@ export default function Modal() {
             </div>
             {/* <!-- Modal body --> */}
 
-            <div className="grid grid-cols-2 gap-4 p-6 sm:grid-cols-4">
+            <div className="flex flex-wrap gap-3 p-6">
               {cubeCollection.map((category) => {
                 return (
                   <CheckboxImage
@@ -102,7 +100,7 @@ export default function Modal() {
                     id={category.id}
                     value={category.name}
                     handleClickRadio={
-                      !editingCube ? handleClickRadio : () => { }
+                      !editingCube ? handleClickRadio : () => {}
                     }
                     selectedCategory={selectedCategory}
                   />
@@ -158,28 +156,28 @@ export default function Modal() {
         </div>
       </div>
       {showDeleteConfirmation && (
-                <div className="fixed top-0 left-0 z-50 w-full h-screen flex items-center justify-center bg-opacity-80 bg-neutral-900">
-                  <div className="bg-white p-4 rounded-lg shadow-lg text-center">
-                    <p className="text-neutral-900 text-lg font-semibold mb-4">
-                      {deleteConfirmationMessage}
-                    </p>
-                    <div className="flex justify-center space-x-4">
-                      <button
-                        onClick={cancelDelete}
-                        className="px-4 py-2 bg-neutral-300 text-neutral-900 rounded-lg hover:bg-neutral-400"
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        onClick={confirmDelete}
-                        className="px-4 py-2 bg-red-600 text-white rounded-lg hover-bg-red-700"
-                      >
-                        Confirm
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              )}
+        <div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen bg-opacity-80 bg-neutral-900">
+          <div className="p-4 text-center bg-white rounded-lg shadow-lg">
+            <p className="mb-4 text-lg font-semibold text-neutral-900">
+              {deleteConfirmationMessage}
+            </p>
+            <div className="flex justify-center space-x-4">
+              <button
+                onClick={cancelDelete}
+                className="px-4 py-2 rounded-lg bg-neutral-300 text-neutral-900 hover:bg-neutral-400"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={confirmDelete}
+                className="px-4 py-2 text-white bg-red-600 rounded-lg hover-bg-red-700"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }