light-layout-component
Version:
easy and useful layout component
38 lines (37 loc) • 2.8 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { styled } from "styled-components";
import TabMenu from "./TabMenu";
var TabLayout = function (_a) {
var tabsMenu = _a.tabsMenu, _b = _a.tabWidth, tabWidth = _b === void 0 ? "100%" : _b, _c = _a.tabMenuHeight, tabMenuHeight = _c === void 0 ? "45px" : _c, _d = _a.tabMenuFontSize, tabMenuFontSize = _d === void 0 ? "16px" : _d, _e = _a.tabMenuBorderBottomColor, tabMenuBorderBottomColor = _e === void 0 ? "black" : _e, _f = _a.defaultTabIndex, defaultTabIndex = _f === void 0 ? 0 : _f, _g = _a.children, children = _g === void 0 ? [] : _g;
var _h = useState(defaultTabIndex), currentTabIndex = _h[0], setCurrentTabIndex = _h[1];
var changeTabIndex = function (index) { return function () {
setCurrentTabIndex(index);
}; };
return (_jsxs(_Fragment, { children: [_jsx(TabsMenuContainer, __assign({ "$tabWidth": tabWidth }, { children: tabsMenu.map(function (tabMenu, index) { return (_jsx(TabMenu, __assign({ onClick: changeTabIndex(index), "$isCurrentTab": currentTabIndex === index, "$tabMenuHeight": tabMenuHeight, "$tabMenuFontSize": tabMenuFontSize, "$tabMenuBorderBottomColor": tabMenuBorderBottomColor }, { children: tabMenu }))); }) })), _jsx(TabContainer, __assign({ "$tabWidth": tabWidth }, { children: children[currentTabIndex] }))] }));
};
var TabsMenuContainer = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
var $tabWidth = _a.$tabWidth;
return $tabWidth;
});
var TabContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n\n padding: 10px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n\n padding: 10px;\n box-sizing: border-box;\n"])), function (_a) {
var $tabWidth = _a.$tabWidth;
return $tabWidth;
});
export default TabLayout;
var templateObject_1, templateObject_2;