dhre-component-lib 0.8.5 → 0.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Tabs/Tabs.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21838,7 +21838,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
21838
21838
|
var css$a = ".tabs {\n display: flex;\n}\n\n.tab {\n padding: 12px;\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #686868;\n border-bottom: 2px solid transparent;\n transition: border-bottom 0.3s ease;\n font-size: 18px !important;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n gap: 0.5rem;\n line-height: 25.2px;\n font-family: \"Meraas Aktiv\", sans-serif;\n font-weight: 400;\n}\n\n.tab.active {\n border-bottom: 2px solid #000000;\n color: #000000;\n}\n\n.tab.inActive {\n border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n color: #000000;\n}\n\n.main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.main::-webkit-scrollbar {\n display: none;\n}\n\n@media (max-width: 767px) {\n .main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .main::-webkit-scrollbar {\n display: none;\n }\n}\n.dot {\n display: inline-block !important;\n width: 8px !important;\n height: 8px !important;\n background-color: red !important;\n border-radius: 50% !important;\n margin-left: 5px !important;\n}\n\n.counts {\n background-color: #d92d27;\n border-radius: 1.5rem;\n font-size: 18px;\n color: #ffffff;\n padding: 1px;\n width: 2rem;\n height: 1.5rem;\n}";
|
|
21839
21839
|
n(css$a,{});
|
|
21840
21840
|
|
|
21841
|
-
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|
|
21841
|
+
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) => {
|
|
21842
21842
|
const [selectedTab, setSelectedTab] = React$1.useState();
|
|
21843
21843
|
const haveDots = ["identification", "", ""];
|
|
21844
21844
|
React$1.useEffect(() => {
|
|
@@ -21858,7 +21858,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|
|
|
21858
21858
|
setSelectedTab(tab);
|
|
21859
21859
|
onTabChange(tab);
|
|
21860
21860
|
};
|
|
21861
|
-
return (React__namespace.default.createElement("div", { className:
|
|
21861
|
+
return (React__namespace.default.createElement("div", { className: `main ${wrapperClassName}`.trim() },
|
|
21862
21862
|
React__namespace.default.createElement("div", { className: "tabs" }, tabs?.map((tab) => (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
21863
21863
|
React__namespace.default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
|
|
21864
21864
|
tab?.name,
|