add actions side bar

Author: Sorosliu1029

src/components/Actions.tsx

@@ -0,0 +1,67 @@
+import {
+  Anchor,
+  Paper,
+  PaperProps,
+  Stack,
+  ThemeIcon,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconCircleDot,
+  IconGitPullRequest,
+  IconHeart,
+  IconStar
+} from '@tabler/icons-react';
+import React from 'react';
+
+const IconStyle = { width: '70%', height: '70%' };
+
+const Data = [
+  {
+    label: 'Issue!',
+    href: 'https://github.com/Sorosliu1029/jupyterlab-leetcode/issues/new/choose',
+    icon: <IconCircleDot style={IconStyle} />
+  },
+  {
+    label: 'Star!',
+    href: 'https://github.com/Sorosliu1029/jupyterlab-leetcode',
+    icon: <IconStar style={IconStyle} />
+  },
+  {
+    label: 'Contribute!',
+    href: 'https://github.com/Sorosliu1029/jupyterlab-leetcode/blob/master/CONTRIBUTING.md',
+    icon: <IconGitPullRequest style={IconStyle} />
+  },
+  {
+    label: 'Sponsor!',
+    href: 'https://github.com/Sorosliu1029',
+    icon: <IconHeart style={IconStyle} />
+  }
+];
+
+const Actions: React.FC<{
+  paperProps: PaperProps;
+}> = ({ paperProps }) => {
+  return (
+    <Paper {...paperProps}>
+      <Stack gap="xs">
+        {...Data.map(item => (
+          <Tooltip label={item.label} key={item.label}>
+            <Anchor
+              size="xs"
+              target="_blank"
+              underline="never"
+              href={item.href}
+            >
+              <ThemeIcon size="sm" variant="white">
+                {item.icon}
+              </ThemeIcon>
+            </Anchor>
+          </Tooltip>
+        ))}
+      </Stack>
+    </Paper>
+  );
+};
+
+export default Actions;

src/components/LeetCodeMain.tsx

@@ -7,6 +7,7 @@ import { LeetCodeProfile } from '../types/leetcode';
 import Profile from './Profile';
 import Statistics from './Statistics';
 import QuestionTable from './QuestionTable';
+import Actions from './Actions';
 
 const MainHeaderPaperProps: PaperProps = {
   shadow: 'md',
@@ -60,6 +61,7 @@ const LeetCodeMain: React.FC<{ docManager: IDocumentManager }> = ({
             paperProps={MainHeaderPaperProps}
             username={profile?.username}
           />
+          <Actions paperProps={MainHeaderPaperProps} />
         </Group>
         <QuestionTable openNotebook={openNoteBook} height={calcHeight()} />
       </Stack>