60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
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 max-h-18 max-w-18"
|
|
src={`${import.meta.env.VITE_ICON_URL}/raidGroup/${raidGroup.raidGroupIcon}`}
|
|
/>
|
|
}
|
|
{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>
|
|
);
|
|
}
|