1import { css } from '@emotion/react';
2import { borderRadius, theme, darkTheme } from '@expo/styleguide';
3import { PropsWithChildren } from 'react';
4
5import { LABEL } from '~/ui/components/Text';
6
7type SnippetHeaderProps = PropsWithChildren<{
8  title: string;
9  alwaysDark?: boolean;
10}>;
11
12export const SnippetHeader = ({ title, children, alwaysDark = false }: SnippetHeaderProps) => (
13  <div css={[headerStyle, alwaysDark && headerDarkStyle]}>
14    <LABEL css={[headerTitleStyle, alwaysDark && { color: darkTheme.text.default }]}>{title}</LABEL>
15    {!!children && <div css={headerActionsStyle}>{children}</div>}
16  </div>
17);
18
19const headerStyle = css`
20  background-color: ${theme.background.default};
21  border: 1px solid ${theme.border.default};
22  border-bottom: none;
23  border-top-left-radius: ${borderRadius.md}px;
24  border-top-right-radius: ${borderRadius.md}px;
25  display: flex;
26  padding: 0 0 0 16px;
27  justify-content: space-between;
28  height: 42px;
29  overflow: hidden;
30`;
31
32const headerDarkStyle = css`
33  background-color: ${darkTheme.background.element};
34  border-color: transparent;
35  padding-right: 8px;
36`;
37
38const headerTitleStyle = css`
39  height: 42px;
40  line-height: 42px !important;
41  user-select: none;
42  font-weight: 500;
43  text-overflow: ellipsis;
44  white-space: nowrap;
45  overflow: hidden;
46  padding-right: 16px;
47`;
48
49const headerActionsStyle = css`
50  display: flex;
51  justify-content: flex-end;
52  align-items: center;
53`;
54