1import { css } from '@emotion/react';
2import { borderRadius, theme, spacing } from '@expo/styleguide';
3import { forwardRef, PropsWithChildren } from 'react';
4
5export type SnippetContentProps = PropsWithChildren<{
6  alwaysDark?: boolean;
7  hideOverflow?: boolean;
8  skipPadding?: boolean;
9  className?: string;
10}>;
11
12export const SnippetContent = forwardRef<HTMLDivElement, SnippetContentProps>(
13  (
14    {
15      children,
16      className,
17      alwaysDark = false,
18      hideOverflow = false,
19      skipPadding = false,
20    }: SnippetContentProps,
21    ref
22  ) => (
23    <div
24      ref={ref}
25      css={[
26        contentStyle,
27        alwaysDark && contentDarkStyle,
28        hideOverflow && contentHideOverflow,
29        skipPadding && skipPaddingStyle,
30      ]}
31      className={className}>
32      {children}
33    </div>
34  )
35);
36
37const contentStyle = css`
38  color: ${theme.text.default};
39  background-color: ${theme.background.secondary};
40  border: 1px solid ${theme.border.default};
41  border-bottom-left-radius: ${borderRadius.medium}px;
42  border-bottom-right-radius: ${borderRadius.medium}px;
43  padding: ${spacing[4]}px;
44  overflow-x: auto;
45
46  code {
47    padding-left: 0;
48    padding-right: 0;
49  }
50`;
51
52const contentDarkStyle = css`
53  background-color: ${theme.palette.black};
54  border-color: transparent;
55  white-space: nowrap;
56`;
57
58const contentHideOverflow = css`
59  overflow: hidden;
60
61  code {
62    white-space: nowrap;
63  }
64`;
65
66const skipPaddingStyle = css({
67  padding: 0,
68});
69