invite url

client/src/components/Icon/icons/light/promotion.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692522401431"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4063"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <path
+        d="M855 789.1V127.4L633 274.9H169V641h81l59.5 255.7H508L448.4 641H633l222 148.1z m-46-86l-146-97.5V310.2l146-97v489.9zM450 850.6H346L297.1 641h104L450 850.6zM239.2 595H215V320.9h274V595H239.2z m377.8 0h-82V320.9h82V595z"
+        p-id="4064"></path>
+</svg>

client/src/components/Icon/index.tsx

@@ -75,7 +75,8 @@ const map = {
   outlink_iframe: require('./icons/outlink/iframe.svg').default,
   addCircle: require('./icons/circle/add.svg').default,
   playFill: require('./icons/fill/play.svg').default,
-  courseLight: require('./icons/light/course.svg').default
+  courseLight: require('./icons/light/course.svg').default,
+  promotionLight: require('./icons/light/promotion.svg').default
 };
 
 export type IconName = keyof typeof map;

client/src/components/SideTabs/index.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
-import { Box, Flex, useTheme } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import type { GridProps } from '@chakra-ui/react';
 import MyIcon, { type IconName } from '../Icon';
-import { useTranslation } from 'next-i18next';
 
 // @ts-ignore
 export interface Props extends GridProps {
@@ -13,7 +12,6 @@ export interface Props extends GridProps {
 }
 
 const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
-  const { t } = useTranslation();
   const sizeMap = useMemo(() => {
     switch (size) {
       case 'sm':
@@ -63,7 +61,7 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
           }}
         >
           <MyIcon mr={2} name={item.icon as IconName} w={'16px'} />
-          {t(item.label)}
+          {item.label}
         </Flex>
       ))}
     </Box>

client/src/components/Tabs/index.tsx

@@ -42,6 +42,7 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
       p={sizeMap.outP}
       borderRadius={'sm'}
       fontSize={sizeMap.fontSize}
+      overflowX={'auto'}
       {...props}
     >
       {list.map((item) => (
@@ -50,6 +51,8 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
           py={sizeMap.inlineP}
           textAlign={'center'}
           borderBottom={'2px solid transparent'}
+          px={3}
+          whiteSpace={'nowrap'}
           {...(activeId === item.id
             ? {
                 color: 'myBlue.700',