1import { css } from '@emotion/react';
2import { darkTheme, iconSize, palette, shadows, theme } from '@expo/styleguide';
3import { cloneElement } from 'react';
4
5import { Button, ButtonProps } from '~/ui/components/Button';
6import { FOOTNOTE } from '~/ui/components/Text';
7
8export type SnippetActionProps = ButtonProps & {
9  alwaysDark?: boolean;
10};
11
12export const SnippetAction = (props: SnippetActionProps) => {
13  const { children, icon, alwaysDark = false, ...rest } = props;
14  const iconStyle = {
15    color: alwaysDark ? darkTheme.text.default : undefined,
16    size: iconSize.small,
17  };
18
19  const styledIcon = icon && cloneElement(icon as any, iconStyle);
20
21  return (
22    <Button
23      size="mini"
24      theme="ghost"
25      icon={styledIcon}
26      css={[!alwaysDark && snippetActionStyle, alwaysDark && alwaysDarkStyle]}
27      {...rest}>
28      <FOOTNOTE css={alwaysDark && { color: darkTheme.text.default }}>{children}</FOOTNOTE>
29    </Button>
30  );
31};
32
33const snippetActionStyle = css({
34  border: 0,
35  borderRadius: 0,
36  borderLeft: `1px solid ${theme.border.default}`,
37  height: 42,
38  lineHeight: 42,
39  padding: `0 16px`,
40
41  ':hover': {
42    backgroundColor: theme.background.secondary,
43    boxShadow: 'none',
44  },
45});
46
47const alwaysDarkStyle = css({
48  borderColor: 'transparent',
49
50  ':hover': {
51    borderColor: palette.dark.gray[500],
52    boxShadow: shadows.button,
53  },
54});
55