@lobehub/ui/es/DraggablePanel/components/DraggablePanelHeader.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
import { styles } from "./style.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import useMergeState from "use-merge-value";
import { PanelLeft, Pin, PinOff } from "lucide-react";

//#region src/DraggablePanel/components/DraggablePanelHeader.tsx
const DraggablePanelHeader = memo((props) => {
	const { pin, setPin, className, setExpand, title, position = "left", ...rest } = props;
	const [isPinned, setIsPinned] = useMergeState(false, {
		onChange: setPin,
		value: pin
	});
	const panelIcon = /* @__PURE__ */ jsx(ActionIcon_default, {
		icon: PanelLeft,
		onClick: () => setExpand?.(false),
		size: "small"
	});
	const pinIcon = /* @__PURE__ */ jsx(ActionIcon_default, {
		active: pin,
		icon: pin ? Pin : PinOff,
		onClick: () => setIsPinned(!isPinned),
		size: "small"
	});
	return /* @__PURE__ */ jsxs(FlexBasic_default, {
		align: "center",
		className: cx(styles.header, className),
		flex: "none",
		gap: 8,
		horizontal: true,
		justify: "space-between",
		...rest,
		children: [
			position === "left" ? panelIcon : pinIcon,
			title,
			position === "left" ? pinIcon : panelIcon
		]
	});
});
DraggablePanelHeader.displayName = "DraggablePanelHeader";
var DraggablePanelHeader_default = DraggablePanelHeader;

//#endregion
export { DraggablePanelHeader_default as default };
//# sourceMappingURL=DraggablePanelHeader.mjs.map