hh-ui-components
Version:
50 lines • 2.91 kB
JavaScript
import React, { useState } from 'react';
export var AccountAuth = function (_a) {
var sign_in = _a.sign_in, sign_up = _a.sign_up, reverse = _a.reverse, sign_in_tab_name = _a.sign_in_tab_name, sign_up_tab_name = _a.sign_up_tab_name;
var _b = useState('1'), currentTab = _b[0], setCurrentTab = _b[1];
var tabs = {
desktop: [
{
content: reverse == false ? sign_in : sign_up
},
{
content: reverse == false ? sign_up : sign_in
}
],
mobile: [
{
id: 1,
tabTitle: reverse == false ? sign_in_tab_name : sign_up_tab_name,
title: reverse == false ? sign_in_tab_name : sign_up_tab_name,
content: reverse == false ? sign_in : sign_up
},
{
id: 2,
tabTitle: reverse == false ? sign_up_tab_name : sign_in_tab_name,
title: reverse == false ? sign_up_tab_name : sign_in_tab_name,
content: reverse == false ? sign_up : sign_in
}
]
};
var style = {
tab: "w-full border border-neutral rounded-[65px] 2xl:rounded-[4.514vw] text-body-text-lg 2xl:text-body-text-2xl py-10 2xl:py-10-2xl px-30 2xl:px-30-2xl hover:border-lnk focus:outline-none"
};
var handleTabClick = function (e) {
setCurrentTab(e.target.id);
};
return (React.createElement("div", { className: "relative w-full overflow-x-hidden overflow-y-scroll lg:overflow-y-hidden mb-40 lg:mb-0 h-[calc(100vh-96px)] lg:h-[calc(100vh-96px)] 2xl:h-[calc(100vh-6.667vw)]" },
React.createElement("div", { className: "hidden lg:block absolute top-0 left-2/4 -translate-x-2/4 w-px bg-warmTone-4 lg:h-[calc(100vh-116px)] 2xl:h-[calc(100vh-8.056vw)]" }),
React.createElement("div", { className: "hidden lg:flex absolute top-2/4 -translate-y-2/4 w-full" }, tabs.mobile.map(function (tab, i) {
return React.createElement("div", { key: i }, tab.content);
})),
React.createElement("div", { className: "block lg:hidden tw-container mt-20" },
React.createElement("div", { className: "flex flex-row space-x-[16px] mb-60" }, tabs.mobile.map(function (tab, i) {
return React.createElement("button", { className: currentTab === "".concat(tab.id)
? "".concat(style.tab, " text-white bg-lnk")
: "".concat(style.tab, " text-lnk bg-white"), key: i, disabled: currentTab === "".concat(tab.id), onClick: (handleTabClick), id: tab.id }, tab.tabTitle);
})),
React.createElement("div", { className: 'content' }, tabs.mobile.map(function (tab, i) {
return React.createElement("div", { key: i }, currentTab === "".concat(tab.id) && tab.content);
})))));
};
//# sourceMappingURL=AccountAuth.js.map