@hypothesis/frontend-shared/lib/components/layout/CardHeader.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/layout/CardHeader.js";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import { CancelIcon } from '../icons';
import { IconButton } from '../input';
import CardTitle from './CardTitle';
/**
 * @typedef {import('../../types').PresentationalProps} CommonProps
 * @typedef {import('preact').JSX.HTMLAttributes<HTMLElement>} HTMLAttributes
 *
 * @typedef CardHeaderProps
 * @prop {string} [title]
 * @prop {() => void} [onClose] - Optional callback to close the Card. When
 *   present, a close button will be rendered
 */

/**
 * Render a header area in a Card with optional title and/or close button
 *
 * @param {CommonProps & CardHeaderProps & HTMLAttributes} props
 */

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function CardHeader({
  children,
  classes,
  elementRef,
  onClose,
  title,
  ...htmlAttributes
}) {
  return _jsxDEV("div", { ...htmlAttributes,
    className: classnames('flex items-center gap-x-2 mx-3 py-2 border-b', classes),
    ref: downcastRef(elementRef),
    "data-component": "CardHeader",
    children: [title && _jsxDEV(CardTitle, {
      children: title
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 45,
      columnNumber: 17
    }, this), children, onClose && _jsxDEV(IconButton, {
      onClick: onClose,
      title: "Close",
      children: _jsxDEV(CancelIcon, {}, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 11
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 9
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 36,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=CardHeader.js.map