@hhgtech/hhg-components/build/esm/index-5e56d9c4.js

Hello Health Group common components

import * as React from 'react';
import React__default from 'react';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { T as Text } from './index-546ca9b5.js';
import classNames from 'classnames';
import { I as ImageWrap } from './index-50aea2c8.js';
import { T as Text$1 } from './index-0b67696c.js';

/* eslint-disable prettier/prettier */
const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),
    React.createElement("path", { d: "M1 9L5 5L1 1", stroke: "#2D87F3", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const Clinic = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
    React.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.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.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.createElement("path", { d: "M11.172 13.6206H8.7583V16.9998H11.172V13.6206Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M9.96533 9.99996V5.65527", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M12.1377 7.82764H7.79297", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));

const StyledInsuranceList = styled.ul `
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  list-style: none;
`;
const StyledInsuranceItem = styled.li `
  p {
    margin-top: 8px;
    text-align: center;
  }

  .insuranceLogo {
    display: grid;
    height: 58px;
    border: 1px solid ${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__default.createElement(StyledInsuranceList, { id: "insurance-list", className: className }, insurances.map((insurance) => (React__default.createElement(StyledInsuranceItem, { className: "insuranceItem", key: insurance.id },
        React__default.createElement("div", { className: "insuranceLogo" },
            React__default.createElement("img", { src: insurance.logo, alt: insurance.name || 'insurance-logo' })),
        isName && (React__default.createElement(Text, { size: "base", color: theme.colors.gray500, type: "bold" }, insurance.name)))))));
};

const StyledPaymentList = styled.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.div `
  border: 1px solid ${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: ${theme.colors.gray800};
  }
`;

const PaymentList = ({ payments, className, isName = true, isMobile = false, }) => {
    if (!payments.length)
        return null;
    return (React__default.createElement(StyledPaymentList, { id: "payment-container", className: classNames(className, {
            paymentList: isMobile && payments.length >= 4,
        }) }, payments.map((payment) => (React__default.createElement(StyledPaymentItem, { className: classNames('payment-item', {
            'payment-item-mobile': isMobile && payments.length >= 4,
        }), key: payment.id },
        React__default.createElement(ImageWrap, { className: "logo", src: payment.logo, alt: payment.name }),
        isName && React__default.createElement("div", { className: "txt-caption-1" }, payment.name))))));
};

const StyledContainer = styled.div `
  display: flex;
  gap: 8px;

  .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: ${theme.colors.gray400};
    flex-shrink: 0;
  }

  .doctor-info-item-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
`;
styled(Clinic) `
  width: 1.25rem;
  height: 1.25rem;
`;
const StyledContentBox = styled.div `
  display: flex;
  flex-direction: column;
  gap: 4px;
`;

const DoctorExpertiseItem = (props) => {
    const { doctorInfo, Icon, title } = props;
    return (React__default.createElement(StyledContainer, null,
        React__default.createElement(Icon, { className: "icon" }),
        React__default.createElement(StyledContentBox, null,
            React__default.createElement(Text$1, { size: "p3", weight: "semiBold", color: "#111111" }, title),
            React__default.createElement("div", { className: "doctor-info-item-content" }, (Array.isArray(doctorInfo) ? doctorInfo : [doctorInfo]).map((info) => (React__default.createElement(Text$1, { size: "p3", weight: "regular", key: info }, info)))))));
};

const StyledIntroductionSection = styled.div `
  display: flex;
  padding: 1rem;
  width: 100%;
  justify-content: space-between;
`;
const StyledTextIntroSection = styled.div `
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const DoctorInfoExpertise = (props) => {
    const { name, specialty, experience, profileImage } = props;
    return (React__default.createElement(StyledIntroductionSection, null,
        React__default.createElement(StyledTextIntroSection, null,
            React__default.createElement(Text$1, { size: "title2", weight: "semiBold", color: "#111111" }, name),
            React__default.createElement("div", null,
                specialty && (React__default.createElement(Text$1, { size: "c1", weight: "regular" }, specialty)),
                experience && (React__default.createElement(Text$1, { size: "c1", weight: "regular" }, experience)))),
        React__default.createElement(ImageWrap, { src: profileImage, alt: name, style: {
                width: '4.5rem',
                height: '4.5rem',
                borderRadius: '50%',
                objectFit: 'cover',
                flexShrink: 0,
            } })));
};

export { ArrowRightBlue as A, Clinic as C, DoctorExpertiseItem as D, InsuranceList as I, PaymentList as P, DoctorInfoExpertise as a };