Admin page raid groups tab working

src/ui/raidGroup/RaidGroupsList.tsx

@@ -0,0 +1,102 @@
+import { ButtonProps } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useState } from "react";
+import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
+import RaidGroupModal from "./modals/RaidGroupModal";
+import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
+
+
+export default function RaidGroupsList({
+	raidGroups
+}:{
+	raidGroups: RaidGroup[];
+}){
+	const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
+	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
+	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div>
+			Icon
+		</div>,
+		<div>
+			Name
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = raidGroups.map((raidGroup) => [
+		<div>
+			{
+				raidGroup.raidGroupIcon &&
+				<div
+					className="absolute -my-4"
+				>
+					<img
+						className="m-auto"
+						src={`${import.meta.env.VITE_ICON_URL}/raidGroupIcons/${raidGroup.raidGroupIcon}`}
+						height={56}
+						width={56}
+					/>
+				</div>
+			}
+			&nbsp;
+		</div>,
+		<div>
+			{raidGroup.raidGroupName}
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			<RaidGroupAdminButtons
+				buttonProps={buttonProps}
+				showEditRaidGroupModal={() => {
+					setSelectedRaidGroup(raidGroup);
+					setDisplayEditRaidGroupModal(true);
+				}}
+				showDeleteRaidGroupModal={() => {
+					setSelectedRaidGroup(raidGroup);
+					setDisplayDeleteRaidGroupModal(true);
+				}}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<RaidGroupModal
+				display={displayEditRaidGroupModal}
+				close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
+				raidGroup={selectedRaidGroup}
+			/>
+			<DeleteRaidGroupModal
+				display={displayDeleteRaidGroupModal}
+				close={() => {setDisplayDeleteRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
+				raidGroup={selectedRaidGroup}
+			/>
+		</>
+	);
+}