1import { css } from '@emotion/react';
2import { spacing, theme, PlanEnterpriseIcon, iconSize } from '@expo/styleguide';
3import * as React from 'react';
4
5import { APIIcon, APIInactiveIcon } from './icons/API';
6import { DocumentationIcon, DocumentationInactiveIcon } from './icons/Documentation';
7import { PreviewIcon, PreviewInactiveIcon } from './icons/Preview';
8
9import { shouldShowFeaturePreviewLink } from '~/constants/FeatureFlags.cjs';
10import { SidebarHeadEntry } from '~/ui/components/Sidebar/SidebarHeadEntry';
11
12type SidebarHeadProps = {
13  sidebarActiveGroup: string;
14};
15
16export const SidebarHead = ({ sidebarActiveGroup }: SidebarHeadProps) => {
17  return (
18    <div css={sidebarHeadContainer}>
19      <SidebarHeadEntry
20        href="/"
21        title="Guides"
22        Icon={sidebarActiveGroup === 'general' ? DocumentationIcon : DocumentationInactiveIcon}
23        isActive={sidebarActiveGroup === 'general'}
24      />
25      <SidebarHeadEntry
26        href="/eas"
27        title="Expo Application Services"
28        Icon={() => (
29          <div css={easIconContainerStyle}>
30            <PlanEnterpriseIcon
31              color={sidebarActiveGroup === 'eas' ? theme.link.default : theme.icon.default}
32              size={iconSize.small}
33            />
34          </div>
35        )}
36        isActive={sidebarActiveGroup === 'eas'}
37      />
38      <SidebarHeadEntry
39        href="/versions/latest"
40        title="API Reference"
41        Icon={sidebarActiveGroup === 'reference' ? APIIcon : APIInactiveIcon}
42        isActive={sidebarActiveGroup === 'reference'}
43      />
44      {shouldShowFeaturePreviewLink() && (
45        <SidebarHeadEntry
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
68const easIconContainerStyle = css({
69  height: spacing[5],
70  width: spacing[5],
71  display: 'flex',
72  alignItems: 'center',
73  justifyContent: 'center',
74  marginRight: spacing[2.5],
75});
76