Skip to content

Commit 80f696b

Browse files
kimsaucekimsauce
authored
Update index.tsx
1 parent 12484c0 commit 80f696b

File tree

1 file changed

+248
-80
lines changed

1 file changed

+248
-80
lines changed

‎src/theme/Footer/index.tsx‎

Lines changed: 248 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,259 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
7+
import React, { Fragment } from 'react';
8+
import DocLink from '@docusaurus/Link';
9+
import isInternalUrl from '@docusaurus/isInternalUrl';
10+
import { useThemeConfig } from '@docusaurus/theme-common';
11+
import IconExternalLink from '@theme/Icon/ExternalLink';
12+
import {
13+
FontAwesomeIcon,
14+
} from '@fortawesome/react-fontawesome';
15+
import {
16+
faXTwitter,
17+
faYoutube,
18+
faLinkedinIn,
19+
} from '@fortawesome/free-brands-svg-icons';
20+
import { Stack } from '@mui/system';
21+
import {
22+
Box,
23+
Divider,
24+
Grid,
25+
Link,
26+
List,
27+
ListItem,
28+
ListItemIcon,
29+
ListItemText,
30+
ListSubheader,
31+
Toolbar,
32+
Tooltip,
33+
Typography,
34+
} from '@mui/material';
735

8-
import React from 'react';
9-
import clsx from 'clsx';
10-
import LastUpdated from '@theme/LastUpdated';
11-
import type {Props} from '@theme/DocItem';
12-
import EditThisPage from '@theme/EditThisPage';
13-
import IconBug from '@theme/IconBug';
14-
import TagsListInline, {
15-
type Props as TagsListInlineProps,
16-
} from '@theme/TagsListInline';
36+
export const Footer = () => {
37+
const { footer } = useThemeConfig();
38+
const { copyright, links = [] } = footer ?? {};
1739

18-
import styles from './styles.module.css';
19-
import {ThemeClassNames} from '@docusaurus/theme-common';
20-
21-
function TagsRow(props: TagsListInlineProps) {
22-
return (
23-
<div
24-
className={clsx(
25-
ThemeClassNames.docs.docFooterTagsRow,
26-
'row margin-bottom--sm',
27-
)}>
28-
<div className="col">
29-
<TagsListInline {...props} />
30-
</div>
31-
</div>
32-
);
33-
}
34-
35-
type EditMetaRowProps = Pick<
36-
Props['content']['metadata'],
37-
'editUrl' | 'lastUpdatedAt' | 'lastUpdatedBy' | 'formattedLastUpdatedAt'
38-
>;
39-
function EditMetaRow({
40-
editUrl,
41-
lastUpdatedAt,
42-
lastUpdatedBy,
43-
formattedLastUpdatedAt,
44-
}: EditMetaRowProps) {
45-
const mdPath = editUrl.substring(57, );
46-
return (
47-
<div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
48-
<div className="col">{editUrl && <EditThisPage editUrl={editUrl} />} | {mdPath && <a href={'https://github.com/SumoLogic/sumologic-documentation/issues/new?template=feedback.md&labels=type:feedback&title=Feedback-for-' + mdPath } target="_blank">
49-
<IconBug />
50-
Submit an issue</a>}</div>
51-
52-
<div className={clsx('col', styles.lastUpdated)}>
53-
{(lastUpdatedAt || lastUpdatedBy) && (
54-
<LastUpdated
55-
lastUpdatedAt={lastUpdatedAt}
56-
formattedLastUpdatedAt={formattedLastUpdatedAt}
57-
lastUpdatedBy={lastUpdatedBy}
58-
/>
59-
)}
60-
</div>
61-
</div>
62-
);
63-
}
64-
65-
export default function DocItemFooter(props: Props): JSX.Element | null {
66-
const {content: DocContent} = props;
67-
const {metadata} = DocContent;
68-
const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
69-
metadata;
70-
71-
const canDisplayTagsRow = tags.length > 0;
72-
const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
73-
74-
const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
75-
76-
if (!canDisplayFooter) {
40+
if (!footer) {
7741
return null;
7842
}
7943

8044
return (
81-
<footer
82-
className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
83-
{canDisplayTagsRow && <TagsRow tags={tags} />}
84-
{canDisplayEditMetaRow && (
85-
<EditMetaRow
86-
editUrl={editUrl}
87-
lastUpdatedAt={lastUpdatedAt}
88-
lastUpdatedBy={lastUpdatedBy}
89-
formattedLastUpdatedAt={formattedLastUpdatedAt}
90-
/>
91-
)}
92-
</footer>
45+
<>
46+
<Grid
47+
bgcolor='#1A273F'
48+
component='footer'
49+
container
50+
justifyContent='center'
51+
mt={10}
52+
px={1}
53+
gap={6}
54+
>
55+
{!!links.length && links.map((category) => (
56+
<Grid
57+
item
58+
component={List}
59+
key={category.title}
60+
py={4}
61+
md='auto'
62+
xs={12}
63+
>
64+
<ListSubheader
65+
sx={{
66+
bgcolor: 'transparent',
67+
color: '#6c7993',
68+
fontFamily: 'Lab Grotesque',
69+
fontWeight: 'bold',
70+
textTransform: 'uppercase',
71+
letterSpacing: '0.1rem',
72+
}}
73+
>
74+
{category.title}
75+
</ListSubheader>
76+
{category.items.map(({ href, label }) => (
77+
<Link
78+
component={DocLink}
79+
href={href}
80+
key={href}
81+
underline='none'
82+
>
83+
<ListItem sx={{ py: 0 }}>
84+
<ListItemText
85+
primaryTypographyProps={{
86+
color: '#e3e3e3',
87+
fontFamily: 'Lab Grotesque',
88+
fontSize: 16,
89+
}}
90+
>
91+
{label}
92+
</ListItemText>
93+
{!isInternalUrl(href) && (
94+
<ListItemIcon
95+
sx={{
96+
minWidth: 'auto',
97+
ml: 1,
98+
'& svg': {
99+
color: '#e3e3e3',
100+
}
101+
}}
102+
>
103+
<IconExternalLink />
104+
</ListItemIcon>
105+
)}
106+
</ListItem>
107+
</Link>
108+
))}
109+
</Grid>
110+
))}
111+
</Grid>
112+
<Stack
113+
alignItems='center'
114+
bgcolor='#1A273F'
115+
borderTop='1px solid'
116+
borderColor='rgba(255,255,255,0.12)'
117+
component={Toolbar}
118+
direction={{
119+
md: 'row',
120+
xs: 'column',
121+
}}
122+
justifyContent='space-between'
123+
py={{
124+
md: 0,
125+
xs: 4,
126+
}}
127+
>
128+
<Stack
129+
alignItems='center'
130+
direction='row'
131+
spacing={2}
132+
pb={{
133+
md: 0,
134+
xs: 2,
135+
}}
136+
>
137+
{[
138+
{
139+
alt: 'Sumo Logic YouTube',
140+
color: '#e3e3e3',
141+
href: 'https://www.youtube.com/channel/UCI16kViradUnvH6DiQmwdqw',
142+
'aria-label': 'Sumo Logic YouTube',
143+
icon: faYoutube,
144+
size: 'lg',
145+
sx: {
146+
cursor: 'pointer',
147+
'&:hover': {
148+
color: '#0045BE',
149+
},
150+
}
151+
},
152+
{
153+
alt: 'Sumo Logic X (formerly known as Twitter)',
154+
color: '#e3e3e3',
155+
href: 'https://x.com/SumoLogic',
156+
'aria-label': 'Sumo Logic X (formerly known as Twitter)',
157+
icon: faXTwitter,
158+
size: 'lg',
159+
sx: {
160+
cursor: 'pointer',
161+
'&:hover': {
162+
color: '#0045BE',
163+
},
164+
}
165+
},
166+
{
167+
alt: 'Sumo Logic LinkedIn',
168+
color: '#e3e3e3',
169+
href: 'https://www.linkedin.com/company/sumo-logic',
170+
'aria-label': 'Sumo Logic LinkedIn',
171+
icon: faLinkedinIn,
172+
size: 'lg',
173+
sx: {
174+
cursor: 'pointer',
175+
'&:hover': {
176+
color: '#0045BE',
177+
},
178+
}
179+
},
180+
].map(({ alt, href, ...other }) => (
181+
<Tooltip key={href} title={alt}>
182+
<Link href={href} rel='noreferrer noopener'>
183+
<Box
184+
component={FontAwesomeIcon}
185+
{...other}
186+
/>
187+
</Link>
188+
</Tooltip>
189+
))}
190+
</Stack>
191+
<Stack
192+
alignItems='center'
193+
direction={{
194+
md: 'row',
195+
xs: 'column',
196+
}}
197+
spacing={{
198+
md: 2,
199+
xs: 0.5,
200+
}}
201+
>
202+
{[
203+
{
204+
label: 'Status',
205+
href: 'https://status.sumologic.com',
206+
},
207+
{
208+
label: 'Legal',
209+
href: 'https://www.sumologic.com/legal',
210+
},
211+
{
212+
label: 'Privacy Statement',
213+
href: 'https://www.sumologic.com/privacy-statement',
214+
},
215+
{
216+
label: 'Terms of Use',
217+
href: 'https://www.sumologic.com/terms-conditions',
218+
}].map(({ href, label }) => (
219+
<Fragment key={href}>
220+
<Link
221+
color='#6c7993'
222+
fontFamily='Lab Grotesque'
223+
fontSize={14}
224+
href={href}
225+
>
226+
{label}
227+
</Link>
228+
<Divider
229+
flexItem
230+
orientation='vertical'
231+
sx={{
232+
bgcolor: '#6c7993',
233+
'&:last-of-type': {
234+
display: {
235+
md: 'block',
236+
sm: 'none',
237+
xs: 'none',
238+
}
239+
},
240+
}}
241+
/>
242+
</Fragment>
243+
))}
244+
{copyright && (
245+
<Typography
246+
color='#6c7993'
247+
fontFamily='Lab Grotesque'
248+
fontSize={14}
249+
pt={{
250+
md: 0,
251+
xs: 1,
252+
}}
253+
>
254+
{copyright}
255+
</Typography>
256+
)}
257+
</Stack>
258+
</Stack>
259+
</>
93260
);
94261
}
262+
export default React.memo(Footer);

0 commit comments

Comments
 (0)