1import { css } from '@emotion/react';
2import { theme, spacing } from '@expo/styleguide';
3import * as React from 'react';
4
5import { CALLOUT } from '../Text';
6
7type SidebarTitleProps = React.PropsWithChildren<object>;
8
9export const SidebarTitle = ({ children }: SidebarTitleProps) => (
10  <div css={STYLES_TITLE}>
11    <CALLOUT weight="medium">{children}</CALLOUT>
12  </div>
13);
14
15const STYLES_TITLE = css({
16  display: 'block',
17  position: 'relative',
18  marginBottom: spacing[2],
19  borderBottom: `1px solid ${theme.border.default}`,
20  marginLeft: spacing[5] + spacing[0.5],
21  marginRight: -spacing[4],
22  paddingBottom: spacing[2],
23  userSelect: 'none',
24});
25