@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
60 lines (59 loc) • 2.3 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Tabs } from "@ark-ui/react";
import classnames from "classnames";
import react from "react";
const Tab = (_props)=>null;
Tab.displayName = "Tab";
const isTabComponent = (component)=>/*#__PURE__*/ react.isValidElement(component) && component.type === Tab;
const Tabs_Tabs = ({ defaultTabId, subLevel, children, onChange })=>{
const tabsPropsArray = [];
const tabsChildren = [];
let matchedHrefId;
react.Children.forEach(children, (child)=>{
if (isTabComponent(child)) {
const { children: tabChildren, ...tabProps } = child.props;
tabsPropsArray.push(tabProps);
tabsChildren.push(/*#__PURE__*/ jsx(Tabs.Content, {
value: tabProps.id,
className: "cobalt-tabs__panel",
children: tabChildren
}, tabProps.id));
if (tabProps.href === window.location.pathname) matchedHrefId = tabProps.id;
}
});
const getOnLinkClick = (href)=>{
if (!href) return;
return ()=>{
window.location.pathname = href;
};
};
return /*#__PURE__*/ jsxs(Tabs.Root, {
className: "cobalt-tabs",
defaultValue: matchedHrefId || defaultTabId?.toString() || tabsPropsArray?.[0]?.id,
onValueChange: (details)=>onChange?.(details.value),
children: [
/*#__PURE__*/ jsxs(Tabs.List, {
className: classnames("cobalt-tabs__labels", {
"cobalt-tabs__labels--subLevel": subLevel
}),
children: [
tabsPropsArray.map((props)=>/*#__PURE__*/ jsx(Tabs.Trigger, {
className: "cobalt-tabs__label",
value: props.id,
onClick: getOnLinkClick(props.href),
children: props.label
}, props.id)),
/*#__PURE__*/ jsx(Tabs.Indicator, {
className: "cobalt-tabs__indicator"
})
]
}),
tabsChildren
]
});
};
Tabs_Tabs.Tab = Tab;
const components_Tabs = Tabs_Tabs;
export default components_Tabs;
export { Tab };
//# sourceMappingURL=index.js.map