1import { css } from '@emotion/react';
2import { spacing, theme, PlanEnterpriseIcon, ArrowLeftIcon, DocsLogo } from '@expo/styleguide';
3
4import { GuidesIcon } from './icons/Guides';
5import { PreviewIcon, PreviewInactiveIcon } from './icons/Preview';
6
7import { shouldShowFeaturePreviewLink } from '~/constants/FeatureFlags.cjs';
8import { Search } from '~/ui/components/Search';
9import { SidebarSingleEntry } from '~/ui/components/Sidebar/SidebarSingleEntry';
10import { A } from '~/ui/components/Text';
11
12type SidebarHeadProps = {
13  sidebarActiveGroup: string;
14};
15
16export const SidebarHead = ({ sidebarActiveGroup }: SidebarHeadProps) => {
17  if (sidebarActiveGroup === 'archive') {
18    return (
19      <div css={sidebarHeadContainerStyle}>
20        <A isStyled href="/" css={sidebarBackLinkStyle}>
21          <ArrowLeftIcon color={theme.icon.secondary} />
22          Back
23        </A>
24      </div>
25    );
26  }
27
28  return (
29    <div css={sidebarHeadContainerStyle}>
30      <Search />
31      <SidebarSingleEntry
32        href="/"
33        title="Guides"
34        Icon={GuidesIcon}
35        isActive={sidebarActiveGroup === 'general'}
36      />
37      <SidebarSingleEntry
38        href="/eas"
39        title="Expo Application Services"
40        Icon={PlanEnterpriseIcon}
41        isActive={sidebarActiveGroup === 'eas'}
42      />
43      <SidebarSingleEntry
44        href="/versions/latest"
45        title="API Reference"
46        Icon={DocsLogo}
47        isActive={sidebarActiveGroup === 'reference'}
48      />
49      {shouldShowFeaturePreviewLink() && (
50        <SidebarSingleEntry
51          href="/feature-preview"
52          title="Feature Preview"
53          Icon={
54            sidebarActiveGroup === 'featurePreview' || sidebarActiveGroup === 'preview'
55              ? PreviewIcon
56              : PreviewInactiveIcon
57          }
58          isActive={sidebarActiveGroup === 'featurePreview' || sidebarActiveGroup === 'preview'}
59        />
60      )}
61    </div>
62  );
63};
64
65const sidebarHeadContainerStyle = css({
66  display: 'flex',
67  flexDirection: 'column',
68  padding: spacing[4],
69  borderBottom: `1px solid ${theme.border.default}`,
70  background: theme.background.default,
71  gap: spacing[0.5],
72});
73
74const sidebarBackLinkStyle = css({
75  color: theme.text.secondary,
76  display: 'flex',
77  gap: spacing[3],
78  alignItems: 'center',
79});
80