add footer component

Author: Sorosliu1029

src/components/BrowserCookie.tsx

@@ -146,7 +146,7 @@ const BrowserCookie: React.FC<{
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Label>With LeetCode logged in</Menu.Label>
-        {BROWSERS.map(({ name, icon }, i) => (
+        {BROWSERS.map(({ name, icon }) => (
           <Menu.Item
             key={name}
             leftSection={icon(theme.colors.blue[6])}

src/components/Footer.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Anchor, Container, Group } from '@mantine/core';
+import classes from '../styles/Footer.module.css';
+import { IconBrandLeetcode } from '@tabler/icons-react';
+
+const LINKS = [
+  {
+    link: 'https://github.com/Sorosliu1029/jupyterlab-leetcode',
+    label: 'GitHub'
+  },
+  { link: 'https://pypi.org/project/jupyterlab-leetcode/', label: 'PyPi' },
+  { link: 'https://www.npmjs.com/package/jupyterlab-leetcode', label: 'NPM' }
+];
+
+const Footer = () => {
+  return (
+    <div className={classes.footer}>
+      <Container className={classes.inner}>
+        <IconBrandLeetcode size={28} />
+        <Group className={classes.links}>
+          {LINKS.map(link => (
+            <Anchor<'a'>
+              c="dimmed"
+              key={link.label}
+              href={link.link}
+              target="_blank"
+              size="sm"
+            >
+              {link.label}
+            </Anchor>
+          ))}
+        </Group>
+      </Container>
+    </div>
+  );
+};
+
+export default Footer;

src/components/LandingPage.tsx

@@ -4,6 +4,7 @@ import BrowserCookie from './BrowserCookie';
 import { Button, Container, Group, Text, Tooltip, Anchor } from '@mantine/core';
 import { IconBrandGithub, IconBrandLinkedin } from '@tabler/icons-react';
 import classes from '../styles/LandingPage.module.css';
+import Footer from './Footer';
 
 const LeetCdoeGradient = { from: '#FEA512', to: '#FFDB01' };
 
@@ -57,7 +58,7 @@ const LandingPage: React.FC<{
           plugin
         </h1>
 
-        <Text className={classes.description} color="dimmed">
+        <Text className={classes.description} c="dimmed">
           For this plugin to work, you may choose one of these {options.length}{' '}
           methods to allow this plugin to{' '}
           <Anchor
@@ -73,6 +74,8 @@ const LandingPage: React.FC<{
         </Text>
 
         <Group className={classes.controls}>{...options}</Group>
+
+        <Footer />
       </Container>
     </div>
   );

src/components/LeetCodeNotebookToolbar.tsx

@@ -6,7 +6,7 @@ import { ICellModel } from '@jupyterlab/cells';
 import { PromiseDelegate, ReadonlyJSONValue } from '@lumino/coreutils';
 import { submitNotebook } from '../services/notebook';
 import { makeWebSocket } from '../services/handler';
-import { leetcodeIcon } from '../icons/leetcode';
+import { LeetCodeIcon } from '../icons/leetcode';
 import {
   LeetCodeSubmissionResult,
   LeetCodeWebSocketMessage
@@ -208,7 +208,7 @@ const LeetCodeNotebookToolbar: React.FC<{ notebook: NotebookPanel }> = ({
     <ToolbarButtonComponent
       onClick={submit}
       tooltip="Submit to LeetCode"
-      icon={leetcodeIcon}
+      icon={LeetCodeIcon}
     />
   );
 };

src/icons/leetcode.ts

@@ -1,6 +1,6 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
-export const leetcodeIcon = new LabIcon({
+export const LeetCodeIcon = new LabIcon({
   name: 'leetcode:submit',
   svgstr:
     '<svg width="95" height="111" viewBox="0 0 95 111" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M68.0063 83.0664C70.5 80.5764 74.5366 80.5829 77.0223 83.0809C79.508 85.579 79.5015 89.6226 77.0078 92.1127L65.9346 103.17C55.7187 113.371 39.06 113.519 28.6718 103.513C28.6117 103.456 23.9861 98.9201 8.72653 83.957C-1.42528 74.0029 -2.43665 58.0749 7.11648 47.8464L24.9282 28.7745C34.4095 18.6219 51.887 17.5122 62.7275 26.2789L78.9048 39.362C81.6444 41.5776 82.0723 45.5985 79.8606 48.3429C77.6488 51.0873 73.635 51.5159 70.8954 49.3003L54.7182 36.2173C49.0488 31.6325 39.1314 32.2622 34.2394 37.5006L16.4274 56.5727C11.7767 61.5522 12.2861 69.574 17.6456 74.8292C28.851 85.8169 37.4869 94.2846 37.4969 94.2942C42.8977 99.496 51.6304 99.4184 56.9331 94.1234L68.0063 83.0664Z" fill="#FFA116"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M41.1067 72.0014C37.5858 72.0014 34.7314 69.1421 34.7314 65.615C34.7314 62.0879 37.5858 59.2286 41.1067 59.2286H88.1245C91.6454 59.2286 94.4997 62.0879 94.4997 65.615C94.4997 69.1421 91.6454 72.0014 88.1245 72.0014H41.1067Z" fill="#B3B3B3"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M49.9118 2.02335C52.3173 -0.55232 56.3517 -0.686894 58.9228 1.72277C61.494 4.13244 61.6284 8.17385 59.2229 10.7495L16.4276 56.5729C11.7768 61.552 12.2861 69.5738 17.6453 74.8292L37.4088 94.2091C39.9249 96.6764 39.968 100.72 37.505 103.24C35.042 105.761 31.0056 105.804 28.4895 103.337L8.72593 83.9567C-1.42529 74.0021 -2.43665 58.0741 7.1169 47.8463L49.9118 2.02335Z" fill="black"></path></svg>'

src/index.ts

@@ -15,7 +15,7 @@ import {
 import { NotebookPanel } from '@jupyterlab/notebook';
 import { ILauncher } from '@jupyterlab/launcher';
 import '@mantine/core/styles.css';
-import { leetcodeIcon } from './icons/leetcode';
+import { LeetCodeIcon } from './icons/leetcode';
 
 import { LeetCodeMainWidget, LeetCodeToolbarWidget } from './widget';
 
@@ -44,14 +44,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
     app.commands.addCommand(command, {
       caption: 'LeetCode',
       label: 'LeetCode',
-      icon: args => (args['isPalette'] ? undefined : leetcodeIcon),
+      icon: args => (args['isPalette'] ? undefined : LeetCodeIcon),
       execute: () => {
         if (!leetcodeWidget || leetcodeWidget.isDisposed) {
           leetcodeWidget = new MainAreaWidget<LeetCodeMainWidget>({
             content: new LeetCodeMainWidget(app, docManager)
           });
           leetcodeWidget.title.label = 'LeetCode Widget';
-          leetcodeWidget.title.icon = leetcodeIcon;
+          leetcodeWidget.title.icon = LeetCodeIcon;
         }
         if (!tracker.has(leetcodeWidget)) {
           tracker.add(leetcodeWidget);
@@ -77,7 +77,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
       restorer.restore(tracker, { command, name: () => 'leetcode' });
     }
     // auto attach to LeetCode notebook
-    docWidgetOpener.opened.connect((sender, widget) => {
+    docWidgetOpener.opened.connect((__sender, widget) => {
       if (widget instanceof NotebookPanel) {
         widget.revealed.then(() => {
           if (widget.model?.metadata?.leetcode_question_info) {

src/styles/Footer.module.css

@@ -0,0 +1,23 @@
+.footer {
+  margin-top: 120px;
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: var(--mantine-spacing-md);
+  padding-bottom: var(--mantine-spacing-md);
+
+  @media (max-width: $mantine-breakpoint-xs) {
+    flex-direction: column;
+  }
+}
+
+.links {
+  @media (max-width: $mantine-breakpoint-xs) {
+    margin-top: var(--mantine-spacing-md);
+  }
+}