phx-react
Version:
PHX REACT
20 lines • 1.59 kB
JavaScript
import React from 'react';
import { PHXSkeleton } from '../Skeleton';
import PHXUrlApply from '../Func/PHXUrlApply/PHXUrlApply';
export const PHXReportButtonTab = ({ activeTab, className = '', columns, configUrlApply, loading = false, onChange, tabs, }) => {
const handleClick = (item) => {
onChange(item.value);
if (configUrlApply && item.key) {
PHXUrlApply(item.key, item.value, item.listKeyReset || [], configUrlApply);
}
};
const containerClass = columns ? `flex gap-4 sm:grid sm:grid-cols-${columns}` : 'flex gap-4';
return (React.createElement("div", { className: `w-full pb-4 ${className}` },
React.createElement("div", { className: 'overflow-x-auto' },
React.createElement("div", { className: containerClass }, tabs.map((item) => (React.createElement("div", { key: item.value, className: 'h-[90px] w-full min-w-[200px]' }, loading ? (React.createElement(PHXSkeleton, { size: 'extra-large', type: 'only-report' })) : (React.createElement("div", { className: `flex h-full w-full cursor-pointer flex-col justify-center rounded-xl
px-4 transition-all sm:px-6
${activeTab === item.value ? 'bg-gray-100' : 'bg-white hover:bg-gray-100'}`, onClick: () => handleClick(item), role: 'button' },
React.createElement("p", { className: 'text-left text-[13px] text-gray-600' }, item.name),
React.createElement("p", { className: 'truncate text-left text-[24px] font-semibold text-black' }, item.count))))))))));
};
//# sourceMappingURL=ReportButton.js.map