@carbon/ibm-products
Version:
Carbon for IBM Products
69 lines (67 loc) • 2.25 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../../node_modules/classnames/index.js";
import { blockClass } from "../PageHeaderUtils.js";
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { AspectRatio } from "@carbon/react";
import { breakpoints } from "@carbon/layout";
//#region src/components/PageHeader/next/PageHeaderHeroImage.tsx
/**
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const PageHeaderHeroImage = ({ className, children, objectFit = "cover", ...other }) => {
const [lgBreakpoint, setLgBreakpoint] = useState(false);
const classNames = (0, import_classnames.default)({
[`${blockClass}__hero-image`]: true,
[`${blockClass}__hero-image--object-fit-${objectFit}`]: objectFit
}, className);
const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
useEffect(() => {
const listener = (event) => {
setLgBreakpoint(event.matches);
};
const mediaQueryList = window.matchMedia(lgMediaQuery);
mediaQueryList.addEventListener("change", listener);
setLgBreakpoint(mediaQueryList.matches);
return () => {
mediaQueryList.removeEventListener("change", listener);
};
}, [lgMediaQuery]);
return /* @__PURE__ */ React.createElement(AspectRatio, {
className: classNames,
...other,
ratio: lgBreakpoint ? "2x1" : "3x2"
}, children);
};
PageHeaderHeroImage.displayName = "PageHeaderHeroImage";
PageHeaderHeroImage.propTypes = {
/**
* Provide child elements to be rendered inside PageHeaderHeroImage.
*/
children: PropTypes.node,
/**
* Specify an optional className to be added to your PageHeaderHeroImage
*/
className: PropTypes.string,
/**
* Specify how the image should fit within the container.
*/
objectFit: PropTypes.oneOf([
"cover",
"contain",
"fill",
"none"
])
};
//#endregion
export { PageHeaderHeroImage };