1import { css } from '@emotion/react';
2import { spacing, theme, PlanEnterpriseIcon, iconSize } from '@expo/styleguide';
3
4import { APIIcon, APIInactiveIcon } from './icons/API';
5import { DocumentationIcon, DocumentationInactiveIcon } from './icons/Documentation';
6import { PreviewIcon, PreviewInactiveIcon } from './icons/Preview';
7
8import { shouldShowFeaturePreviewLink } from '~/constants/FeatureFlags.cjs';
9import { SidebarSingleEntry } from '~/ui/components/Sidebar/SidebarSingleEntry';
10import { customIconContainerStyle } from '~/ui/components/Sidebar/icons/styles';
11
12type SidebarHeadProps = {
13  sidebarActiveGroup: string;
14};
15
16export const SidebarHead = ({ sidebarActiveGroup }: SidebarHeadProps) => {
17  return (
18    <div css={sidebarHeadContainer}>
19      <SidebarSingleEntry
20        href="/"
21        title="Guides"
22        Icon={sidebarActiveGroup === 'general' ? DocumentationIcon : DocumentationInactiveIcon}
23        isActive={sidebarActiveGroup === 'general'}
24      />
25      <SidebarSingleEntry
26        href="/eas"
27        title="Expo Application Services"
28        Icon={() => (
29          <div css={customIconContainerStyle}>
30            <PlanEnterpriseIcon
31              color={sidebarActiveGroup === 'eas' ? theme.text.link : theme.icon.default}
32              size={iconSize.sm}
33            />
34          </div>
35        )}
36        isActive={sidebarActiveGroup === 'eas'}
37      />
38      <SidebarSingleEntry
39        href="/versions/latest"
40        title="API Reference"
41        Icon={sidebarActiveGroup === 'reference' ? APIIcon : APIInactiveIcon}
42        isActive={sidebarActiveGroup === 'reference'}
43      />
44      {shouldShowFeaturePreviewLink() && (
45        <SidebarSingleEntry
46          href="/feature-preview"
47          title="Feature Preview"
48          Icon={
49            sidebarActiveGroup === 'featurePreview' || sidebarActiveGroup === 'preview'
50              ? PreviewIcon
51              : PreviewInactiveIcon
52          }
53          isActive={sidebarActiveGroup === 'featurePreview' || sidebarActiveGroup === 'preview'}
54        />
55      )}
56    </div>
57  );
58};
59
60const sidebarHeadContainer = css({
61  display: 'flex',
62  flexDirection: 'column',
63  padding: spacing[4],
64  borderBottom: `1px solid ${theme.border.default}`,
65  background: theme.background.default,
66});
67