phx-react
Version:
PHX REACT
28 lines • 3.84 kB
JavaScript
import React from 'react';
// import { PHXBadge } from '../Badge'
import { PHXTabs } from '../Tabs';
export const PHXCardDetail = ({ className = '', data = [], itemBottom, tabs, titleHeader, gridColspan = 3, children, }) => {
const layoutClass = className || `grid grid-cols-2 gap-4 md:grid-cols-${gridColspan} lg:grid-cols-${gridColspan}`;
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: `border-gray-20 rounded-lg border shadow-[0rem_0.0825rem_0rem_#00000012] bg-white` },
titleHeader && (React.createElement("div", { className: 'flex items-start justify-between gap-3 px-4 pt-4' },
React.createElement("p", { className: 'min-w-0 text-sm font-semibold text-gray-900' }, titleHeader.content),
titleHeader.hyperLink && (React.createElement("a", { className: 'shrink-0 flex items-center gap-1 text-xs font-medium text-link-500 hover:opacity-90', href: titleHeader.hyperLink.href, rel: titleHeader.hyperLink.rel, target: titleHeader.hyperLink.target },
titleHeader.hyperLink.content,
React.createElement("svg", { "aria-hidden": 'true', className: 'h-[14px] w-[14px] shrink-0', fill: 'none', viewBox: '0 0 13 13', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M8.1998 2.80005C7.86843 2.80005 7.5998 3.06868 7.5998 3.40005C7.5998 3.73142 7.86843 4.00005 8.1998 4.00005H9.15128L6.97554 6.17578C6.74123 6.4101 6.74123 6.79 6.97554 7.02431C7.20985 7.25863 7.58975 7.25863 7.82407 7.02431L9.9998 4.84858V5.80005C9.9998 6.13142 10.2684 6.40005 10.5998 6.40005C10.9312 6.40005 11.1998 6.13142 11.1998 5.80005V3.40005C11.1998 3.06868 10.9312 2.80005 10.5998 2.80005H8.1998Z', fill: '#625AFA' }),
React.createElement("path", { d: 'M10.7998 8.20005C10.7998 7.86868 10.5312 7.60005 10.1998 7.60005C9.86843 7.60005 9.5998 7.86868 9.5998 8.20005V9.00005C9.5998 9.55233 9.15209 10 8.5998 10H4.9998C4.44752 10 3.99981 9.55233 3.99981 9.00005L3.99981 5.40005C3.99981 4.84776 4.44752 4.40005 4.9998 4.40005H5.7998C6.13118 4.40005 6.3998 4.13142 6.3998 3.80005C6.3998 3.46868 6.13118 3.20005 5.7998 3.20005L4.9998 3.20005C3.78478 3.20005 2.7998 4.18502 2.7998 5.40005V9.00005C2.7998 10.2151 3.78478 11.2 4.9998 11.2H8.5998C9.81483 11.2 10.7998 10.2151 10.7998 9.00005V8.20005Z', fill: '#625AFA' })))))),
tabs ? (React.createElement("div", { className: 'px-4' },
React.createElement(PHXTabs, { className: 'mt-3', dataTabs: tabs, type: 'default' }))) : (React.createElement("div", { className: `${layoutClass} flex flex-wrap gap-2 px-4 pb-4 pt-3 md:gap-4` }, data.map((item) => (React.createElement("div", { key: item.title },
React.createElement("p", { className: 'text-xs font-normal text-gray-700' }, item.title),
React.createElement("div", { className: 'mt-1 flex items-baseline text-xs font-semibold text-indigo-800' }, item.content),
(item === null || item === void 0 ? void 0 : item.subContent) && React.createElement("div", { className: 'mt-1' }, item === null || item === void 0 ? void 0 : item.subContent)))))),
itemBottom && (React.createElement("div", { className: 'px-4 pb-4' },
React.createElement("div", { className: 'border-t' },
React.createElement("div", null,
React.createElement("p", { className: 'mt-4 text-xs font-normal text-gray-700' }, itemBottom.title),
React.createElement("p", { className: 'mt-1 flex items-baseline text-xs font-semibold text-indigo-800' }, itemBottom.content))))),
children && React.createElement("div", { className: className }, children))));
};
export default PHXCardDetail;
//# sourceMappingURL=CardDetail.js.map