Programmiererforum

Code: Select all

src/
├── Components/
│   ├── Modals/
│   │   ├── MainModal.jsx
│   │   └── CategoryModal.jsx
└── Screens/
└── Dashboard/
└── Admin/
└── Categories.jsx
< /code>
categoryModal.jsx
import React from "react";
import MainModal from "./MainModal";

function CategoryModal({ modalOpen, setModalOpen }) {
return (


Create


);
}

export default CategoryModal;
< /code>
 categories.jsx
import React, { useState } from "react";
import SideBar from "../SideBar";
import { CategoriesData } from "../../../Data/CateporiesData";
import { HiPlus } from "react-icons/hi";
import Table2 from "../../../Components/Table2";
// Make sure this path is correct - verify the actual location of your CategoryModal component
import CategoryModal from "../../../Components/Modals/CategoryModal";

function Categories() {
const [modalOpen, setModalOpen] = useState(false);

const openModal = () => {
setModalOpen(true);
};

return (

{/* Modal component */}



Categories

 Create





);
}

export default Categories;
< /code>
 Mainmodal.jsx
import { Dialog, Transition } from "@headlessui/react";
import React, { Fragment, useRef } from "react";
import { IoClose } from "react-icons/io5";

function MainModal({ modalOpen, setModalOpen, children }) {
const cancelButtonRef = useRef();
return (


 setModalOpen(false)}
>





{/* This element is to trick the browser into centering the modal contents.  */}

&#8203;



{children}



 setModalOpen(false)}
type="button"
className="inline-flex transition justify-center px-4 py-2 text-base font-medium text-white bg-subMain rounded-full hover:bg-white hover:text-red-500"
>







);
}

export default MainModal;