Raid Group calendar working

src/ui/calendar/RaidGroupHeader.tsx

@@ -0,0 +1,61 @@
+import { ButtonProps } from "@/components/button/Button";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useState } from "react";
+import RaidGroupAdminButtons from "../raidGroup/RaidGroupAdminButtons";
+import DeleteRaidGroupModal from "../raidGroup/modals/DeleteRaidGroupModal";
+import RaidGroupModal from "../raidGroup/modals/RaidGroupModal";
+
+
+export default function RaidGroupHeader({
+	raidGroup
+}:{
+	raidGroup: RaidGroup;
+}){
+	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
+	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	return (
+		<h1
+			className="flex flex-col items-center justify-center"
+		>
+			<div
+				className="flex flex-row items-center justify-center text-4xl"
+			>
+				{
+					raidGroup.raidGroupIcon &&
+					<img
+						className="m-auto mr-4"
+						src={`${import.meta.env.VITE_ICON_URL}/raidGroupIcons/${raidGroup.raidGroupIcon}`}
+						height={72}
+						width={72}
+					/>
+				}
+				{raidGroup.raidGroupName}
+			</div>
+			<div>
+				<RaidGroupAdminButtons
+					buttonProps={buttonProps}
+					showEditRaidGroupModal={() => setDisplayEditRaidGroupModal(true)}
+					showDeleteRaidGroupModal={() => setDisplayDeleteRaidGroupModal(true)}
+				/>
+			</div>
+			<RaidGroupModal
+				display={displayEditRaidGroupModal}
+				close={() => setDisplayEditRaidGroupModal(false)}
+				raidGroup={raidGroup}
+			/>
+			<DeleteRaidGroupModal
+				display={displayDeleteRaidGroupModal}
+				close={() => setDisplayDeleteRaidGroupModal(false)}
+				raidGroup={raidGroup}
+			/>
+		</h1>
+	);
+}