1import { css } from '@emotion/react';
2import { mergeClasses } 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={[contentStyle, hideOverflow && contentHideOverflow]}
26      className={mergeClasses(
27        'text-default bg-subtle border border-default rounded-b-md overflow-x-auto p-4',
28        alwaysDark && 'bg-palette-black border-transparent whitespace-nowrap',
29        hideOverflow && 'overflow-hidden',
30        skipPadding && 'p-0',
31        className
32      )}>
33      {children}
34    </div>
35  )
36);
37
38const contentStyle = css`
39  code {
40    padding-left: 0;
41    padding-right: 0;
42  }
43`;
44
45const contentHideOverflow = css`
46  code {
47    white-space: nowrap;
48  }
49`;
50