@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
69 lines • 2.44 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/layout/CardHeader.tsx";
import classnames from 'classnames';
import { useContext } from 'preact/hooks';
import { downcastRef } from '../../util/typing';
import CloseableContext from '../CloseableContext';
import CloseButton from '../input/CloseButton';
import CardTitle from './CardTitle';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
* Render a header area in a Card with optional title and/or close button
*/
export default function CardHeader({
children,
classes,
elementRef,
fullWidth = false,
onClose,
title,
variant = 'primary',
...htmlAttributes
}) {
const closeableContext = useContext(CloseableContext);
// Provided `onClose` is prioritized, but also check to see if there is
// a close handler provided by a `CloseableContext`
const closeHandler = onClose !== null && onClose !== void 0 ? onClose : closeableContext === null || closeableContext === void 0 ? void 0 : closeableContext.onClose;
return _jsxDEV("div", {
"data-component": "CardHeader",
...htmlAttributes,
className: classnames('flex items-center gap-x-2 border-b py-2', {
'bg-slate-0 border-slate-5 rounded-t-[inherit]': variant === 'secondary',
'mx-3': !fullWidth && variant === 'primary',
'px-3': fullWidth || variant === 'secondary'
}, classes),
ref: downcastRef(elementRef),
children: [title && _jsxDEV(CardTitle, {
variant: variant,
children: title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 17
}, this), children, _jsxDEV("div", {
className: "grow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 7
}, this), closeHandler && _jsxDEV(CloseButton, {
onClick: closeHandler,
classes: classnames(
// Pull button right such that its icon right-aligns with the
// header's bottom border
'-mr-2.5',
// Button icons render at 1em square. In this context, the icon
// should always be exactly 16px square, so set font size to make
// this happen.
'text-[16px]')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 5
}, this);
}
//# sourceMappingURL=CardHeader.js.map