xref: /expo/docs/ui/components/Header/Logo.tsx (revision 8c97fc97) 
1import { css } from '@emotion/react';
2import { theme, typography, Logo as LogoIcon, WordMarkLogo, LinkBase } from '@expo/styleguide';
3import { breakpoints, spacing, borderRadius } from '@expo/styleguide-base';
4import { ChevronRightIcon } from '@expo/styleguide-icons';
5
6import { DocumentationIcon } from '~/ui/components/Sidebar/icons/Documentation';
7
8type Props = {
9  subgroup?: string;
10};
11
12export const Logo = ({ subgroup }: Props) => (
13  <div className="flex items-center gap-4">
14    <LinkBase css={linkStyle} href="https://expo.dev">
15      <WordMarkLogo
16        className="w-[72px] mt-[1px] h-5 text-default my-1"
17        css={hideOnMobile}
18        title="Expo"
19      />
20      <LogoIcon className="icon-lg mt-[1px] text-default" css={showOnMobile} title="Expo" />
21    </LinkBase>
22    <LinkBase css={linkStyle} href="/">
23      <div css={iconContainer}>
24        <DocumentationIcon className="icon-sm" />
25      </div>
26      <span css={subtitleStyle}>Docs</span>
27    </LinkBase>
28    {subgroup && (
29      <>
30        <ChevronRightIcon className="text-icon-secondary" css={[chevronStyle, hideOnMobile]} />
31        <span css={[subtitleStyle, hideOnMobile]}>{subgroup}</span>
32      </>
33    )}
34  </div>
35);
36
37const linkStyle = css`
38  display: flex;
39  flex-direction: row;
40  align-items: center;
41  text-decoration: none;
42  user-select: none;
43  gap: ${spacing[2]}px;
44  outline-offset: 4px;
45`;
46
47const chevronStyle = css`
48  margin: 0 ${-spacing[2]}px;
49
50  @media screen and (max-width: ${breakpoints.medium}px) {
51    margin-left: ${spacing[0.5]}px;
52  }
53`;
54
55const hideOnMobile = css`
56  @media screen and (max-width: ${breakpoints.medium}px) {
57    display: none;
58  }
59`;
60
61const showOnMobile = css`
62  display: none;
63
64  @media screen and (max-width: ${breakpoints.medium}px) {
65    display: block;
66    margin-top: 0;
67    margin-right: ${spacing[1.5]}px;
68  }
69`;
70
71const subtitleStyle = css`
72  color: ${theme.text.default};
73  font-weight: 500;
74  user-select: none;
75  ${typography.fontSizes[18]}
76`;
77
78const iconContainer = css({
79  display: 'flex',
80  alignItems: 'center',
81  justifyContent: 'center',
82  backgroundColor: theme.palette.blue4,
83  borderRadius: borderRadius.sm,
84  height: 24,
85  width: 24,
86});
87