@kiwicom/orbit-components/lib/Tabs/components/TabPanel/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _TabContext = require("../../TabContext");
const TabPanel = ({
  children,
  margin,
  padding,
  dataTest,
  active = false
}) => {
  const {
    index,
    isActive
  } = (0, _TabContext.usePanel)();
  const cssVars = {
    "--tab-panel-padding": typeof padding === "string" ? padding : undefined,
    "--tab-panel-margin": typeof margin === "string" ? margin : undefined,
    "--tab-panel-padding-top": typeof padding === "object" ? padding.top : undefined,
    "--tab-panel-padding-right": typeof padding === "object" ? padding.right : undefined,
    "--tab-panel-padding-bottom": typeof padding === "object" ? padding.bottom : undefined,
    "--tab-panel-padding-left": typeof padding === "object" ? padding.left : undefined,
    "--tab-panel-margin-top": typeof margin === "object" ? margin.top : undefined,
    "--tab-panel-margin-right": typeof margin === "object" ? margin.right : undefined,
    "--tab-panel-margin-bottom": typeof margin === "object" ? margin.bottom : undefined,
    "--tab-panel-margin-left": typeof margin === "object" ? margin.left : undefined
  };
  return active || isActive ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.default)(cssVars["--tab-panel-padding"] && "p-[var(--tab-panel-padding)]", cssVars["--tab-panel-margin"] && "m-[var(--tab-panel-margin)]", cssVars["--tab-panel-padding-top"] && "pt-[var(--tab-panel-padding-top)]", cssVars["--tab-panel-padding-right"] && "pe-[var(--tab-panel-padding-right)]", cssVars["--tab-panel-padding-bottom"] && "pb-[var(--tab-panel-padding-bottom)]", cssVars["--tab-panel-padding-left"] && "ps-[var(--tab-panel-padding-left)]", cssVars["--tab-panel-margin-top"] && "mt-[var(--tab-panel-margin-top)]", cssVars["--tab-panel-margin-right"] && "me-[var(--tab-panel-margin-right)]", cssVars["--tab-panel-margin-bottom"] && "mb-[var(--tab-panel-margin-bottom)]", cssVars["--tab-panel-margin-left"] && "ms-[var(--tab-panel-margin-left)]"),
    style: cssVars,
    id: `panel-${index}`,
    "data-test": dataTest,
    role: "tabpanel",
    "aria-labelledby": `tab-${index}`
  }, children) : null;
};
var _default = exports.default = TabPanel;