50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { Button, Modal } from "react-bootstrap";
|
|
import { AiOutlineClose } from "react-icons/ai";
|
|
import { primary, secondary } from "../../../colors";
|
|
|
|
export const ModalHeader = ({
|
|
title,
|
|
icon,
|
|
onClose,
|
|
}: {
|
|
onClose: () => void;
|
|
title: JSX.Element | string;
|
|
icon?: JSX.Element;
|
|
}): React.JSX.Element => {
|
|
return (
|
|
<Modal.Header
|
|
style={{
|
|
border: "2px solid black",
|
|
borderBottom: "none",
|
|
backgroundColor: primary,
|
|
}}
|
|
>
|
|
<Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
|
|
{typeof title === "string" ? (
|
|
<>
|
|
{icon}
|
|
<h2 className='m-auto p-2' style={{ textAlign: "center" }}>
|
|
{title}
|
|
</h2>
|
|
</>
|
|
) : (
|
|
title
|
|
)}
|
|
<Button
|
|
className='ml-auto mr-0'
|
|
style={{
|
|
backgroundColor: secondary,
|
|
color: "black",
|
|
border: "2px solid black",
|
|
width: "fit-content",
|
|
height: "fit-content",
|
|
}}
|
|
onClick={onClose}
|
|
>
|
|
<AiOutlineClose />
|
|
</Button>
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
);
|
|
};
|