xref: /expo/docs/ui/components/Header/Logo.tsx (revision 2de90eda) 
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"
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`;
45
46const chevronStyle = css`
47  margin: 0 ${-spacing[2]}px;
48
49  @media screen and (max-width: ${breakpoints.medium}px) {
50    margin-left: ${spacing[0.5]}px;
51  }
52`;
53
54const hideOnMobile = css`
55  @media screen and (max-width: ${breakpoints.medium}px) {
56    display: none;
57  }
58`;
59
60const showOnMobile = css`
61  display: none;
62
63  @media screen and (max-width: ${breakpoints.medium}px) {
64    display: block;
65    margin-top: 0;
66    margin-right: ${spacing[1.5]}px;
67  }
68`;
69
70const subtitleStyle = css`
71  color: ${theme.text.default};
72  font-weight: 500;
73  user-select: none;
74  ${typography.fontSizes[18]}
75`;
76
77const iconContainer = css({
78  display: 'flex',
79  alignItems: 'center',
80  justifyContent: 'center',
81  backgroundColor: theme.palette.blue4,
82  borderRadius: borderRadius.sm,
83  height: 24,
84  width: 24,
85});
86