Files
RaidBuilderWeb/src/ui/raidInstance/RaidInstanceAdminButtons.tsx

68 lines
1.8 KiB
TypeScript

import { ButtonProps } from "@/components/button/Button";
import DangerButton from "@/components/button/DangerButton";
import PrimaryButton from "@/components/button/PrimaryButton";
import { RaidInstance } from "@/interface/RaidInstance";
import { useTheme } from "@/providers/ThemeProvider";
import { BsPencilFill, BsTrash3 } from "react-icons/bs";
import { Tooltip } from "react-tooltip";
export default function RaidInstanceAdminButtons({
raidInstance,
buttonProps,
showRaidInstanceModal,
showDeleteRaidInstanceModal
}:{
raidInstance?: RaidInstance;
buttonProps: ButtonProps;
showRaidInstanceModal: () => void;
showDeleteRaidInstanceModal: () => void;
}){
const { theme } = useTheme();
const componentId = crypto.randomUUID().replaceAll("-", "");
return (
<div
className="flex flex-row gap-2"
>
<PrimaryButton
{...buttonProps}
id={`raidInstanceAdminButtonsEdit${componentId}`}
onClick={showRaidInstanceModal}
aria-label={`Edit ${raidInstance?.raidInstanceName}`}
data-tooltip-delay-show={750}
>
<BsPencilFill
size={22}
/>
</PrimaryButton>
<DangerButton
{...buttonProps}
id={`raidInstanceAdminButtonsDelete${componentId}`}
onClick={showDeleteRaidInstanceModal}
aria-label={`Delete ${raidInstance?.raidInstanceName}`}
data-tooltip-delay-show={750}
>
<BsTrash3
size={22}
/>
</DangerButton>
<Tooltip
anchorSelect={`#raidInstanceAdminButtonsEdit${componentId}`}
place="top"
variant={theme === "dark" ? "light" : "dark"}
>
Edit {raidInstance?.raidInstanceName}
</Tooltip>
<Tooltip
anchorSelect={`#raidInstanceAdminButtonsDelete${componentId}`}
place="top"
variant={theme === "dark" ? "light" : "dark"}
>
Delete {raidInstance?.raidInstanceName}
</Tooltip>
</div>
);
}