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