64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import {User} from "@/interfaces/user";
|
|
import {Tab} from "@headlessui/react";
|
|
import clsx from "clsx";
|
|
import ExamList from "./ExamList";
|
|
import GroupList from "./GroupList";
|
|
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>
|
|
</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>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
);
|
|
}
|