Modal Windows System 🪟

This system is able to create modal windows, minimize or maximize them. The idea was to create a base in TailwindCSS capable of being modified to the taste of each developer, it is 100% customizable and adaptable to circumstances.

Technologies ⚙️

• NextJS
• TailwindCSS
• GSAP
• Lucide Icons

Layout and components 🌈

The system has two parts, a custom Hook that contains the Modal and Bar components (minimized modal view), and the Modal context, this is where the magic happens. ✨

The ideal is to create a layout in which the aforementioned components will be found.

"use client";

import { useModal } from "@/hooks";

interface IProps {
  children: React.ReactNode;
}

export function ModalLayout({ children }: IProps) {
  const { Modal, Bar } = useModal();

  return (
    <>
      {children}
      <Modal />
      <Bar />
    </>
  );
}

Create and minimize windows 📦

The modal Context provides us with 4 functions, onCreate, onClose, onMinimize and onResize, of which the most used will be onCreate and onMinimize, we don't have to worry about the others.

onCreate 📦

Function used to create a new modal window, the same one receives some properties that we are going to explain next.

export interface IModal {
  id: number;
  size: ISize;
  title: string;
  isOpen: boolean;
  component: ReactNode;
  isDraggeable?: boolean;
  isFullscreen?: boolean;
  minimizedTitle: string;
  handleOpen: (id: number) => void;
}

Some of the most important properties:

• minimizedTitle: Title that will appear once minimized.
• isDraggable: If this property is true the modal will be able to be dragged on the screen.
• handleOpen: function that will be used at the moment of minimizing the modal, this must be the same function in which onCreate is called.
• component: Component that will show the modal.
• title: Title that will be shown in the modal.
• size: size of the modal.
• id: id of the modal.

actions.onCreate({
    minimizedTitle: `Operator #${value.id}`,
    isDraggeable: true,
    handleOpen: handleCreateOperatorModal,
    component: <OperatorModalContent operator={value} />,
    isOpen: true,
    title: `Operator #${value.id}`,
    size: "lg",
    id: value.id,
});

onMinimize 📦

This function clears the state Modal inside the context and saves in the state Tabs the properties that we pass to it by parameters. In simple words, it creates the minimized tab.

export interface ITab {
  title: string;
  id: number;
  handleOpen: (id: number) => void;
}

Some of the most important properties:

• title: Title that will appear once minimized.
• id: id of the modal.
• handleOpen: Title that will appear once minimized.

actions.onMinimize({
    id: operator.id,
    title: `Operator #${operator.id}`,
    handleOpen: handleCreateOperatorModal,
});