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