@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
23 lines (22 loc) • 1.95 kB
JavaScript
import { __assign, __rest } from "tslib";
import clsx from 'clsx';
import React from 'react';
import { getBaseProps } from '../internal/base-component';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
export default function Header(_a) {
var _b = _a.variant, variant = _b === void 0 ? 'h2' : _b, _c = _a.headingTagOverride, HeadingTag = _c === void 0 ? variant : _c, children = _a.children, actions = _a.actions, counter = _a.counter, description = _a.description, info = _a.info, restProps = __rest(_a, ["variant", "headingTagOverride", "children", "actions", "counter", "description", "info"]);
useTelemetry('Header');
var baseProps = getBaseProps(restProps);
return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className, styles["root-variant-" + variant], !actions && [styles["root-no-actions"]], description && [styles["root-has-description"]]) }),
React.createElement("div", { className: clsx(styles.main, styles["main-variant-" + variant]) },
React.createElement("div", { className: clsx(styles.title, styles["title-variant-" + variant]) },
React.createElement(HeadingTag, { className: clsx(styles.heading, styles["heading-variant-" + variant]) },
React.createElement("span", { className: styles['heading-text'] }, children),
counter !== undefined && React.createElement("span", { className: styles.counter },
" ",
counter)),
info && React.createElement("span", { className: styles.info }, info)),
description && (React.createElement("p", { className: clsx(styles.description, styles["description-variant-" + variant]) }, description))),
actions && React.createElement("div", { className: clsx(styles.actions, styles["actions-variant-" + variant]) }, actions)));
}