@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
72 lines (71 loc) • 2.42 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { Icon } from "../Icon/index.js";
const Tab = ({ children, url, selected = false, inCard = false })=>{
const className = classnames("cobalt-Tab", {
"cobalt-Tab--inCard": inCard
});
const tabProps = {
role: "tab",
"aria-selected": selected,
className
};
let TabComponent;
if (null == url) TabComponent = "button";
else {
TabComponent = "a";
Object.assign(tabProps, {
href: url
});
}
return /*#__PURE__*/ jsx(TabComponent, {
...tabProps,
children: /*#__PURE__*/ jsx("span", {
className: "cobalt-Tab__Content",
children: children
})
});
};
const TabBar = ({ children, leftAlign = false, underlined = false })=>{
const scrollerClassName = classnames("cobalt-TabScroller", {
"cobalt-TabScroller--underlined": underlined
});
const scrollAreaClassName = classnames("cobalt-TabScroller__ScrollArea", {
"cobalt-TabScroller__ScrollArea--leftAlign": leftAlign
});
return /*#__PURE__*/ jsxs("div", {
className: "cobalt-TabBar",
role: "tablist",
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-TabBar__ScrollControl",
children: /*#__PURE__*/ jsx("button", {
type: "button",
className: "cobalt-TabBar__ScrollButton",
children: /*#__PURE__*/ jsx(Icon, {
source: "chevronLeft"
})
})
}),
/*#__PURE__*/ jsx("div", {
className: scrollerClassName,
children: /*#__PURE__*/ jsx("div", {
className: scrollAreaClassName,
children: children
})
}),
/*#__PURE__*/ jsx("div", {
className: "cobalt-TabBar__ScrollControl",
children: /*#__PURE__*/ jsx("button", {
type: "button",
className: "cobalt-TabBar__ScrollButton",
children: /*#__PURE__*/ jsx(Icon, {
source: "chevronRight"
})
})
})
]
});
};
export { Tab, TabBar };
//# sourceMappingURL=index.js.map