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.medium}px;
24  border-top-right-radius: ${borderRadius.medium}px;
25  display: flex;
26  padding: 0 0 0 16px;
27  justify-content: space-between;
28  min-height: 42px;
29`;
30
31const headerDarkStyle = css`
32  background-color: ${darkTheme.background.tertiary};
33  border-color: transparent;
34  padding-right: 8px;
35`;
36
37const headerTitleStyle = css`
38  line-height: 42px !important;
39  user-select: none;
40`;
41
42const headerActionsStyle = css`
43  display: flex;
44  justify-content: flex-end;
45  align-items: center;
46`;
47