formbricks-formbricks/packages/ui/ModalWithTabs/index.tsx

import { useEffect, useState } from "react";

import { Modal } from "../Modal";

interface ModalWithTabsProps {
  open: boolean;
  setOpen: (v: boolean) => void;
  icon?: React.ReactNode;
  label?: string;
  description?: string;
  tabs: TabProps[];
  closeOnOutsideClick?: boolean;
  size?: "md" | "lg";
}

interface TabProps {
  title: string;
  children: React.ReactNode;
}

export const ModalWithTabs = ({
  open,
  setOpen,
  tabs,
  icon,
  label,
  description,
  closeOnOutsideClick,
  size = "lg",
}: ModalWithTabsProps) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index: number) => {
    setActiveTab(index);
  };

  useEffect(() => {
    if (!open) {
      setActiveTab(0);
    }
  }, [open]);

  return (
    <Modal open={open} setOpen={setOpen} noPadding closeOnOutsideClick={closeOnOutsideClick} size={size}>
      <div className="flex h-full flex-col rounded-lg">
        <div className="rounded-t-lg bg-slate-100">
          <div className="mr-20 flex items-center justify-between truncate p-6">
            <div className="flex items-center space-x-2">
              {icon && <div className="mr-1.5 h-6 w-6 text-slate-500">{icon}</div>}
              <div>
                {label && <div className="text-xl font-medium text-slate-700">{label}</div>}
                {description && <div className="text-sm text-slate-500">{description}</div>}
              </div>
            </div>
          </div>
        </div>
        <div className="flex  h-full w-full items-center  justify-center space-x-2 border-b border-slate-200 px-6 ">
          {tabs.map((tab, index) => (
            <button
              key={index}
              className={`mr-4 px-1 pb-3 pt-6 focus:outline-none ${
                activeTab === index
                  ? "border-brand-dark border-b-2 font-semibold text-slate-900"
                  : "text-slate-500 hover:text-slate-700"
              }`}
              onClick={() => handleTabClick(index)}>
              {tab.title}
            </button>
          ))}
        </div>
        <div className="flex-1 p-6">{tabs[activeTab].children}</div>
      </div>
    </Modal>
  );
};