34 lines
1019 B
TypeScript
34 lines
1019 B
TypeScript
import usePopupStore from "../store/popupStore";
|
|
import XMarkIcon from "./icons/XMarkIcon";
|
|
import Button from "./ui/Button";
|
|
|
|
interface PopupHeaderProps {
|
|
title?: string;
|
|
leftButton?: React.ReactNode;
|
|
ref?: React.RefObject<HTMLDivElement | null>;
|
|
}
|
|
|
|
function PopupHeader({ title, leftButton, ref }: PopupHeaderProps) {
|
|
const { setPopup } = usePopupStore();
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="2xl:p-[1.111vw] p-4 flex justify-between items-center select-none relative"
|
|
>
|
|
<div className="2xl:size-[2.222vw] size-8">{leftButton}</div>
|
|
{title && (
|
|
<p className="flex-1 font-medium text-center title-s">{title}</p>
|
|
)}
|
|
<Button variant="secondary" size="small" onClick={() => setPopup(null)}>
|
|
<div className="2xl:size-[1.111vw] size-4">
|
|
<XMarkIcon />
|
|
</div>
|
|
</Button>
|
|
<hr className="bg-[#F2F2F2] 2xl:h-[0.069vw] h-px absolute bottom-0 w-[calc(100%-2.778vw)] left-[1.389vw]" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PopupHeader;
|