@bemit/consent-ui-mui/ConsentUiEmbedTwitter/ConsentUiEmbedTwitter.js

import React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import CircularProgress from '@mui/material/CircularProgress';
import { ConsentUiBoxEmbed } from '@bemit/consent-ui-mui/ConsentUiBoxEmbed';
import { useEmbedState } from '@bemit/consent-ui-react/useEmbedState';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const ConsentUiEmbedTwitter = ({
  service,
  labels,
  children,
  px = 3,
  py = 5,
  icon,
  title,
  infoBtnUp,
  infoMaxWidth,
  pos,
  ...props
}) => {
  const {
    serviceConsent,
    setServiceConsent,
    serviceInfo
  } = useEmbedState(service);
  return _jsxs(_Fragment, {
    children: [serviceConsent ? null : _jsx(Paper, {
      variant: 'outlined',
      style: {
        width: '100%',
        borderRadius: 6
      },
      children: _jsx(Box, {
        px: px,
        py: py,
        style: {
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center'
        },
        children: _jsx(ConsentUiBoxEmbed, {
          service: service,
          icon: icon,
          title: title,
          labels: labels,
          serviceConsent: serviceConsent,
          setServiceConsent: setServiceConsent,
          serviceInfo: serviceInfo,
          infoBtnUp: infoBtnUp,
          infoMaxWidth: infoMaxWidth,
          pos: pos
        })
      })
    }), serviceConsent ? _jsx(EmbedTweet, {
      consent: serviceConsent,
      py: py,
      ...props
    }) : null]
  });
};
const loadedState = {
  current: false
};
export const EmbedTweet = ({
  consent,
  user,
  tweet,
  py
}) => {
  const consentB = Boolean(consent);
  React.useEffect(() => {
    if (consentB) {
      if (!loadedState.current) {
        loadedState.current = true;
        const scriptTwitter = document.createElement('script');
        scriptTwitter.async = true;
        scriptTwitter.src = 'https://platform.twitter.com/widgets.js';
        scriptTwitter.onload = () => {
          if (window.twttr) {
            window.twttr.widgets.load();
          }
        };
        document.body.append(scriptTwitter);
      } else {
        if (window.twttr) {
          window.twttr.widgets.load();
        }
      }
    }
  }, [tweet, consentB]);
  return _jsx(_Fragment, {
    children: consent ? _jsxs("blockquote", {
      className: "twitter-tweet",
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '100%'
      },
      children: [_jsx("a", {
        href: 'https://twitter.com/' + user + '/status/' + tweet + ''
      }), _jsxs(Box, {
        my: py,
        style: {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          width: '100%'
        },
        children: [_jsx(Typography, {
          gutterBottom: true,
          children: "Loading Tweet"
        }), _jsx(CircularProgress, {})]
      })]
    }) : null
  });
};