phx-react
Version:
PHX REACT
28 lines • 3.42 kB
JavaScript
import React, { useState } from 'react';
import { classNames } from '../types';
export function PHXSwitchView(_a) {
var _b, _c;
var className = _a.className, dataSwitch = _a.dataSwitch, defaultTab = _a.defaultTab, getOnlyTitleOfSwitch = _a.getOnlyTitleOfSwitch, onClickSwitch = _a.onClickSwitch;
var defaultActive = dataSwitch ? (getOnlyTitleOfSwitch ? dataSwitch[0].id : dataSwitch[0].name) : null;
var _d = useState(defaultTab ? defaultTab : defaultActive), current = _d[0], setCurrent = _d[1];
return (React.createElement("div", { className: className },
React.createElement("div", { className: 'mb-4' },
React.createElement("div", { className: 'sm:hidden' },
React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }),
React.createElement("select", { className: 'block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_b = dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.find(function (switchItem) { return (switchItem.id || switchItem.name) === current; })) === null || _b === void 0 ? void 0 : _b.name, id: 'tabs', name: 'tabs', onChange: function (e) {
setCurrent(e.target.value);
getOnlyTitleOfSwitch === null || getOnlyTitleOfSwitch === void 0 ? void 0 : getOnlyTitleOfSwitch(e.target.value);
} }, dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.map(function (switchItem) { return (React.createElement("option", { key: switchItem.name, value: switchItem.id || switchItem.name }, switchItem.name)); }))),
React.createElement("div", { className: 'hidden sm:block' },
React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1 rounded-xl border border-gray-300 bg-[#F5F5F5] p-1 shadow' }, dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.map(function (switchItem) { return (React.createElement("button", { key: switchItem.name, className: classNames((switchItem.id || switchItem.name) === current
? 'text-gray-950'
: 'text-gray-500 hover:text-gray-700', 'group relative rounded-lg px-3 py-1.5 text-xs font-normal leading-4 focus:z-10'), onClick: function () {
setCurrent(switchItem.id || switchItem.name);
getOnlyTitleOfSwitch === null || getOnlyTitleOfSwitch === void 0 ? void 0 : getOnlyTitleOfSwitch(switchItem.id);
onClickSwitch && onClickSwitch(switchItem);
}, type: 'button' },
React.createElement("span", null, switchItem.name),
React.createElement("span", { "aria-hidden": 'true', className: classNames((switchItem.id || switchItem.name) === current ? 'bg-gray-800' : 'bg-transparent', 'absolute inset-x-0 bottom-[-0.25rem] left-[0.1rem] h-[3px] rounded-t-md transition-colors duration-200 group-hover:bg-gray-400') }))); }))),
React.createElement("div", { className: 'pt-4' }, dataSwitch && ((_c = dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.find(function (switchItem) { return (switchItem.id || switchItem.name) === current; })) === null || _c === void 0 ? void 0 : _c.component)))));
}
//# sourceMappingURL=SwitchView.js.map