@hhgtech/hhg-components
Version:
Hello Health Group common components
207 lines (183 loc) • 8.8 kB
JavaScript
'use strict';
var React = require('react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var index = require('./index-c88c8189.js');
var classNames = require('classnames');
var index$1 = require('./index-6b44ec2b.js');
var index$2 = require('./index-d4ad3f79.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
/* eslint-disable prettier/prettier */
const ArrowRightBlue = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),
React__namespace.createElement("path", { d: "M1 9L5 5L1 1", stroke: "#2D87F3", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" })));
/* eslint-disable prettier/prettier */
const Clinic = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
React__namespace.createElement("path", { d: "M4.89646 16.9996H2.96549C2.43225 16.9996 2 16.5674 2 16.0341V12.6549C2 12.1217 2.43225 11.6895 2.96549 11.6895H4.89646", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M15.0342 11.6895H16.9652C17.4984 11.6895 17.9306 12.1217 17.9306 12.6549V16.0341C17.9306 16.5674 17.4984 16.9996 16.9652 16.9996H15.0342", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M5.86197 3H14.0686C14.6015 3 15.0341 3.43263 15.0341 3.96549V16.9995H4.89648V3.96549C4.89648 3.43263 5.32912 3 5.86197 3Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M11.172 13.6206H8.7583V16.9998H11.172V13.6206Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M9.96533 9.99996V5.65527", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M12.1377 7.82764H7.79297", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));
const StyledInsuranceList = styled__default["default"].ul `
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
list-style: none;
`;
const StyledInsuranceItem = styled__default["default"].li `
p {
margin-top: 8px;
text-align: center;
}
.insuranceLogo {
display: grid;
height: 58px;
border: 1px solid ${miscTheme.theme.colors.neutral200};
border-radius: 6px;
place-content: center;
> img {
width: 93px;
height: 43px;
object-fit: contain;
}
}
`;
const InsuranceList = ({ insurances, className, isName = true, }) => {
if (!insurances.length)
return null;
return (React__namespace["default"].createElement(StyledInsuranceList, { id: "insurance-list", className: className }, insurances.map((insurance) => (React__namespace["default"].createElement(StyledInsuranceItem, { className: "insuranceItem", key: insurance.id },
React__namespace["default"].createElement("div", { className: "insuranceLogo" },
React__namespace["default"].createElement("img", { src: insurance.logo, alt: insurance.name || 'insurance-logo' })),
isName && (React__namespace["default"].createElement(index.Text, { size: "base", color: miscTheme.theme.colors.gray500, type: "bold" }, insurance.name)))))));
};
const StyledPaymentList = styled__default["default"].div `
display: flex;
flex-wrap: wrap;
gap: 7px;
&.paymentList {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
justify-content: center;
}
`;
const StyledPaymentItem = styled__default["default"].div `
border: 1px solid ${miscTheme.theme.colors.neutral100};
border-radius: 12px;
width: 80px;
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
&.payment-item-mobile {
width: 100%;
}
.logo {
position: relative;
width: 55px;
aspect-ratio: 55 / 32;
object-fit: contain;
}
.txt-caption-1 {
font-size: 0.6875rem;
line-height: 1rem;
color: ${miscTheme.theme.colors.gray800};
}
`;
const PaymentList = ({ payments, className, isName = true, isMobile = false, }) => {
if (!payments.length)
return null;
return (React__namespace["default"].createElement(StyledPaymentList, { id: "payment-container", className: classNames__default["default"](className, {
paymentList: isMobile && payments.length >= 4,
}) }, payments.map((payment) => (React__namespace["default"].createElement(StyledPaymentItem, { className: classNames__default["default"]('payment-item', {
'payment-item-mobile': isMobile && payments.length >= 4,
}), key: payment.id },
React__namespace["default"].createElement(index$1.ImageWrap, { className: "logo", src: payment.logo, alt: payment.name }),
isName && React__namespace["default"].createElement("div", { className: "txt-caption-1" }, payment.name))))));
};
const StyledContainer = styled__default["default"].div `
display: flex;
gap: 8px;
.icon {
width: 1.25rem;
height: 1.25rem;
color: ${miscTheme.theme.colors.gray400};
flex-shrink: 0;
}
.doctor-info-item-content {
display: flex;
flex-direction: column;
gap: 10px;
}
`;
styled__default["default"](Clinic) `
width: 1.25rem;
height: 1.25rem;
`;
const StyledContentBox = styled__default["default"].div `
display: flex;
flex-direction: column;
gap: 4px;
`;
const DoctorExpertiseItem = (props) => {
const { doctorInfo, Icon, title } = props;
return (React__namespace["default"].createElement(StyledContainer, null,
React__namespace["default"].createElement(Icon, { className: "icon" }),
React__namespace["default"].createElement(StyledContentBox, null,
React__namespace["default"].createElement(index$2.Text, { size: "p3", weight: "semiBold", color: "#111111" }, title),
React__namespace["default"].createElement("div", { className: "doctor-info-item-content" }, (Array.isArray(doctorInfo) ? doctorInfo : [doctorInfo]).map((info) => (React__namespace["default"].createElement(index$2.Text, { size: "p3", weight: "regular", key: info }, info)))))));
};
const StyledIntroductionSection = styled__default["default"].div `
display: flex;
padding: 1rem;
width: 100%;
justify-content: space-between;
`;
const StyledTextIntroSection = styled__default["default"].div `
display: flex;
flex-direction: column;
gap: 2px;
`;
const DoctorInfoExpertise = (props) => {
const { name, specialty, experience, profileImage } = props;
return (React__namespace["default"].createElement(StyledIntroductionSection, null,
React__namespace["default"].createElement(StyledTextIntroSection, null,
React__namespace["default"].createElement(index$2.Text, { size: "title2", weight: "semiBold", color: "#111111" }, name),
React__namespace["default"].createElement("div", null,
specialty && (React__namespace["default"].createElement(index$2.Text, { size: "c1", weight: "regular" }, specialty)),
experience && (React__namespace["default"].createElement(index$2.Text, { size: "c1", weight: "regular" }, experience)))),
React__namespace["default"].createElement(index$1.ImageWrap, { src: profileImage, alt: name, style: {
width: '4.5rem',
height: '4.5rem',
borderRadius: '50%',
objectFit: 'cover',
flexShrink: 0,
} })));
};
exports.ArrowRightBlue = ArrowRightBlue;
exports.Clinic = Clinic;
exports.DoctorExpertiseItem = DoctorExpertiseItem;
exports.DoctorInfoExpertise = DoctorInfoExpertise;
exports.InsuranceList = InsuranceList;
exports.PaymentList = PaymentList;