@carbon/ibm-products
Version:
Carbon for IBM Products
71 lines (69 loc) • 2.51 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.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_PageHeaderUtils = require("../PageHeaderUtils.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_layout = require("@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__ */ require_runtime.__toESM(require_index.default);
const PageHeaderHeroImage = ({ className, children, objectFit = "cover", ...other }) => {
const [lgBreakpoint, setLgBreakpoint] = (0, react.useState)(false);
const classNames = (0, import_classnames.default)({
[`${require_PageHeaderUtils.blockClass}__hero-image`]: true,
[`${require_PageHeaderUtils.blockClass}__hero-image--object-fit-${objectFit}`]: objectFit
}, className);
const lgMediaQuery = `(min-width: ${_carbon_layout.breakpoints.lg.width})`;
(0, react.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.default.createElement(_carbon_react.AspectRatio, {
className: classNames,
...other,
ratio: lgBreakpoint ? "2x1" : "3x2"
}, children);
};
PageHeaderHeroImage.displayName = "PageHeaderHeroImage";
PageHeaderHeroImage.propTypes = {
/**
* Provide child elements to be rendered inside PageHeaderHeroImage.
*/
children: prop_types.default.node,
/**
* Specify an optional className to be added to your PageHeaderHeroImage
*/
className: prop_types.default.string,
/**
* Specify how the image should fit within the container.
*/
objectFit: prop_types.default.oneOf([
"cover",
"contain",
"fill",
"none"
])
};
//#endregion
exports.PageHeaderHeroImage = PageHeaderHeroImage;