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