57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import copy from "copy-to-clipboard";
|
|
import { Toaster, Variant, Text, TextType } from "design-system";
|
|
import { Colors } from "constants/Colors";
|
|
import {
|
|
createMessage,
|
|
IN_APP_EMBED_SETTING,
|
|
} from "@appsmith/constants/messages";
|
|
import styled from "styled-components";
|
|
|
|
const StyledText = styled(Text)`
|
|
line-height: 1.5;
|
|
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
}
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: ${Colors.GRAY_100};
|
|
}
|
|
`;
|
|
|
|
type EmbedCodeSnippetProps = {
|
|
snippet: string;
|
|
};
|
|
|
|
function EmbedCodeSnippet(props: EmbedCodeSnippetProps) {
|
|
const scrollWrapperRef = React.createRef<HTMLSpanElement>();
|
|
const onClick = () => {
|
|
copy(props.snippet);
|
|
Toaster.show({
|
|
text: createMessage(IN_APP_EMBED_SETTING.copiedEmbedCode),
|
|
variant: Variant.success,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-1 select-all bg-[color:var(--appsmith-color-black-100)]"
|
|
data-cy="t--embed-snippet"
|
|
onClick={onClick}
|
|
>
|
|
<StyledText
|
|
className="break-all max-h-32 overflow-y-auto p-2 mr-0.5"
|
|
color={Colors.GREY_900}
|
|
ref={scrollWrapperRef}
|
|
type={TextType.P1}
|
|
>
|
|
{props.snippet}
|
|
</StyledText>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EmbedCodeSnippet;
|