@navinc/base-react-components
Version:
Nav's Pattern Library
25 lines • 2.39 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tabs } from '../tabs/tabs.js';
import { forwardRef, useState } from 'react';
import { Button } from '../button/button.js';
import { Icon } from '../icon/icon.js';
import { cn } from '../../cn.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
export const PageHeader = styledBackwardsCompatibility(forwardRef((_a, forwardedRef) => {
var _b;
var { title, description, variation = 'primary', secondaryCtaText, tabs = [], defaultTabName, onCtaClick } = _a, props = __rest(_a, ["title", "description", "variation", "secondaryCtaText", "tabs", "defaultTabName", "onCtaClick"]);
const [activeTab, setActiveTab] = useState(defaultTabName !== null && defaultTabName !== void 0 ? defaultTabName : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.id);
return (_jsxs("div", Object.assign({ ref: forwardedRef }, props, { className: cn('className="flex flex-col gap-300 items-start w-full', props.className), children: [variation === 'secondary' && onCtaClick && (_jsxs(Button, { density: "standard", variant: "plain", onClick: onCtaClick, children: [_jsx(Icon, { name: "arrow_back" }), secondaryCtaText] })), _jsxs("div", { className: "flex gap-100 flex-col w-full", children: [title && _jsx("p", { className: "display2-emphasized", children: title }), description && _jsx("p", { className: "title3", children: description })] }), tabs.length ? (_jsxs(Tabs, Object.assign({ defaultValue: activeTab, value: activeTab, onValueChange: (tab) => setActiveTab(tab) }, props, { className: "w-full", children: [_jsx(Tabs.List, { children: tabs.map((tab) => (_jsx(Tabs.Tab, { value: tab.id, children: tab.title }, tab.id))) }), tabs.map((tab) => (_jsx(Tabs.Content, { value: tab.id, children: tab.content }, tab.id)))] }))) : null] })));
}));
//# sourceMappingURL=page-header.js.map