@hhgtech/hhg-components/build/esm/index-d3ac3302.js

Hello Health Group common components

import { a as __awaiter } from './tslib.es6-ea4dfe68.js';
import React__default, { useContext, useState, useRef, useEffect } from 'react';
import { useMantineTheme } from '@mantine/core';
import { H as Heading } from './index-dcc517ff.js';
import { T as Text } from './index-9f5659e8.js';
import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-40e61585.js';
import styled from '@emotion/styled';
import { PATHS } from './togetherApiPaths.js';
import { D as DEFAULT_IMG } from './constants-f4091ce6.js';

const StyledCardLink = styled.div `
  .link-info-container {
    padding: 0.5rem 1rem;
    background: ${(props) => props.color || '#f4faff'};
  }
  .link-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: min(280px, 56.25%);
    .link-image-blur {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 110%;
      height: 110%;
      /* Add the blur effect */
      -webkit-filter: blur(8px);
      filter: blur(8px);
      object-fit: cover;
      object-position: center;
      opacity: 0.8;
      transform: translate(-50%, -50%);
    }
    .link-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }
  a {
    text-decoration: none;
  }
  &[data-is-marrybaby='true'] {
    overflow: hidden;
    border-radius: 1rem;
    .link-info-container {
      padding-bottom: 1rem;
      p {
        color: #2661ad;
      }
      .link-logo {
        max-width: 2rem;
        height: 13px;
        margin-right: 4px;
        object-fit: contain;
        vertical-align: middle;
      }
    }
    .link-image-wrapper {
      padding-top: min(360px, 56.25%);
      .link-image {
        object-fit: cover;
      }
    }
  }
`;

const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
    const { data: { locale, env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
    const [hideLogo, setHideLogo] = useState(false);
    const _theme = useMantineTheme();
    const noRefetchRef = useRef(noRefetch);
    noRefetchRef.current = noRefetch;
    const [previewData, setPreviewData] = useState(null);
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            if (noRefetchRef.current)
                return;
            if (!url)
                return setPreviewData(null);
            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
            callApi(getApiPath(PATHS.FETCH_PREVIEW, {
                _locale: locale,
            }), 'POST', {
                data: {
                    link: url,
                },
                headers: {
                    'Content-Type': 'application/json',
                },
            })
                .then((res) => {
                var _a, _b, _c;
                setHideLogo(false);
                setPreviewData({
                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
                    url,
                    image: ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.logo),
                    // logo: meta.logo,
                });
            })
                .catch(() => {
                setPreviewData(null);
            });
        }))();
    }, [url]);
    const displayImage = (previewData === null || previewData === void 0 ? void 0 : previewData.image) || image;
    const displayTitle = (previewData === null || previewData === void 0 ? void 0 : previewData.title) || title;
    const displayLogo = (previewData === null || previewData === void 0 ? void 0 : previewData.logo) || logo;
    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
    const urlParts = displayUrl
        .replace('http://', '')
        .replace('https://', '')
        .split(/[/?#]/);
    const domain = urlParts[0];
    const showDefaultRef = useRef(false);
    return (React__default.createElement(StyledCardLink, { "data-is-marrybaby": isMarryBaby, className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0] },
        React__default.createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
            displayImage && (React__default.createElement("div", { className: "link-image-wrapper" },
                !isMarryBaby && (React__default.createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
                        if (!showDefaultRef.current) {
                            showDefaultRef.current = true;
                            e.currentTarget.src = DEFAULT_IMG;
                        }
                    }, loading: "lazy" })),
                React__default.createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
                        if (!showDefaultRef.current) {
                            showDefaultRef.current = true;
                            e.currentTarget.src = DEFAULT_IMG;
                        }
                    }, loading: "lazy" }))),
            React__default.createElement("div", { className: "link-info-container" },
                React__default.createElement(Text, { size: "n1" },
                    isMarryBaby && displayLogo && !hideLogo && (React__default.createElement("img", { className: "link-logo", src: displayLogo, onError: () => setHideLogo(true), loading: "lazy" })),
                    domain),
                React__default.createElement(Heading, { tag: "h6" }, displayTitle)))));
};

export { CardLink as C };