encoach_frontend/src/pages/(admin)/Lists/index.tsx

import { User } from "@/interfaces/user";
import { Tab } from "@headlessui/react";
import clsx from "clsx";
import CodeList from "./CodeList";
import DiscountList from "./DiscountList";
import ExamList from "./ExamList";
import GroupList from "./GroupList";
import PackageList from "./PackageList";
import UserList from "./UserList";

export default function Lists({ user }: { user: User }) {
  return (
    <Tab.Group>
      <Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
        <Tab
          className={({ selected }) =>
            clsx(
              "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
              "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
              "transition duration-300 ease-in-out",
              selected
                ? "bg-white shadow"
                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
            )
          }
        >
          User List
        </Tab>
        {user?.type === "developer" && (
          <Tab
            className={({ selected }) =>
              clsx(
                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
              )
            }
          >
            Exam List
          </Tab>
        )}
        <Tab
          className={({ selected }) =>
            clsx(
              "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
              "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
              "transition duration-300 ease-in-out",
              selected
                ? "bg-white shadow"
                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
            )
          }
        >
          Group List
        </Tab>
        {user && ["developer", "admin", "corporate"].includes(user.type) && (
          <Tab
            className={({ selected }) =>
              clsx(
                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
              )
            }
          >
            Code List
          </Tab>
        )}
        {user && ["developer", "admin"].includes(user.type) && (
          <Tab
            className={({ selected }) =>
              clsx(
                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
              )
            }
          >
            Package List
          </Tab>
        )}
        {user && ["developer", "admin"].includes(user.type) && (
          <Tab
            className={({ selected }) =>
              clsx(
                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
              )
            }
          >
            Discount List
          </Tab>
        )}
      </Tab.List>
      <Tab.Panels className="mt-2">
        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
          <UserList user={user} />
        </Tab.Panel>
        {user?.type === "developer" && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <ExamList user={user} />
          </Tab.Panel>
        )}
        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
          <GroupList user={user} />
        </Tab.Panel>
        {user && ["developer", "admin", "corporate"].includes(user.type) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <CodeList user={user} />
          </Tab.Panel>
        )}
        {user && ["developer", "admin"].includes(user.type) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <PackageList user={user} />
          </Tab.Panel>
        )}
        {user && ["developer", "admin"].includes(user.type) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <DiscountList user={user} />
          </Tab.Panel>
        )}
      </Tab.Panels>
    </Tab.Group>
  );
}