terriajs
Version:
Geospatial data visualization platform.
26 lines • 1.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import Box from "../../../../../Styled/Box";
import { RawButton } from "../../../../../Styled/Button";
import Icon, { StyledIcon } from "../../../../../Styled/Icon";
import { TextSpan } from "../../../../../Styled/Text";
import Spacing from "../../../../../Styled/Spacing";
import Clipboard from "../../../../Clipboard";
export const EmbedSection = ({ shareUrl }) => {
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const iframeCode = shareUrl?.url && shareUrl.url.length > 0
? `<iframe style="width: 720px; height: 600px; border: none;" src="${shareUrl.url}" allowFullScreen mozAllowFullScreen webkitAllowFullScreen></iframe>`
: "";
return (_jsxs(Box, { column: true, children: [_jsx(RawButton, { onClick: () => setIsOpen((prev) => !prev), children: _jsxs(Box, { css: `
align-items: center;
justify-content: space-between;
width: 100%;
`, children: [_jsx(TextSpan, { semiBold: true, isLink: true, medium: true, children: t("share.embedTitle") }), _jsx(StyledIcon, { glyph: isOpen ? Icon.GLYPHS.opened : Icon.GLYPHS.closed, styledWidth: "10px", light: true })] }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx(Spacing, { bottom: 1 }), _jsx(Explanation, { children: t("share.embedDescription") }), _jsx(Spacing, { bottom: 1 }), _jsx(Clipboard, { text: !shareUrl?.shorteningInProgress ? iframeCode : "", inputPlaceholder: t("share.shortLinkShortening") })] }))] }));
};
const Explanation = styled(TextSpan) `
opacity: 0.8;
`;
//# sourceMappingURL=EmbedSection.js.map