增加外链

packages/pancake-uikit/src/widgets/Menu/Menu.tsx

@@ -75,7 +75,10 @@ const Menu: React.FC<NavProps> = ({
   profile,
   children,
   inviteUrl,
+  outLink,
 }) => {
+  console.log("outLink-----:", outLink);
+
   const { isXl } = useMatchBreakpoints();
   const isMobile = isXl === false;
   const [isPushed, setIsPushed] = useState(!isMobile);
@@ -143,6 +146,7 @@ const Menu: React.FC<NavProps> = ({
           cakePriceUsd={cakePriceUsd}
           pushNav={setIsPushed}
           links={links}
+          outLink={outLink}
         />
         <Inner isPushed={isPushed} showMenu={showMenu}>
           {children}

packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx

@@ -8,6 +8,9 @@ import CakePrice from "./CakePrice";
 import ThemeSwitcher from "./ThemeSwitcher";
 import SocialLinks from "./SocialLinks";
 import LangSelector from "./LangSelector";
+import Text from "../../../components/Text/Text";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Link from "../../../components/Link/Link";
 
 interface Props extends PanelProps, PushedProps {}
 
@@ -33,6 +36,11 @@ const SocialEntry = styled.div`
   height: ${MENU_ENTRY_HEIGHT}px;
   padding: 0 16px;
 `;
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+`;
 
 const PanelFooter: React.FC<Props> = ({
   isPushed,
@@ -43,6 +51,7 @@ const PanelFooter: React.FC<Props> = ({
   currentLang,
   langs,
   setLang,
+  outLink,
 }) => {
   if (!isPushed) {
     return (
@@ -53,12 +62,26 @@ const PanelFooter: React.FC<Props> = ({
       </Container>
     );
   }
-
+  let covers = "";
+  if (outLink && outLink.length > 0) {
+    covers = outLink[0].cover;
+  }
   return (
     <Container>
       <SocialEntry>
         <CakePrice cakePriceUsd={cakePriceUsd} />
-        <SocialLinks />
+        <Dropdown position="top-right" target={<Image src={covers} />}>
+          {outLink && outLink.length > 0
+            ? outLink?.map((item) => {
+                return (
+                  <Link href={item.link} color="textSubtle" key={item.id}>
+                    <Image src={item.cover} />
+                  </Link>
+                );
+              })
+            : ""}
+        </Dropdown>
+        {/* <SocialLinks outLink={outLink} /> */}
       </SocialEntry>
       <SettingsEntry>
         <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} />

packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx

@@ -1,37 +1,45 @@
 import React from "react";
+import styled from "styled-components";
 import { SvgProps } from "../../../components/Svg";
 import Flex from "../../../components/Box/Flex";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import Link from "../../../components/Link/Link";
+import Text from "../../../components/Text/Text";
 import * as IconModule from "../icons";
 import { socials } from "../config";
+import { LinkLabel } from "./MenuEntry";
+import { OutLink } from "../types";
 
 const Icons = IconModule as unknown as { [key: string]: React.FC<SvgProps> };
+interface Props {
+  outLink?: OutLink[];
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+`;
+
+const SocialLinks: React.FC<Props> = ({ outLink }) => {
+  let covers = "";
+  if (outLink && outLink.length > 0) {
+    covers = outLink[0].cover;
+  }
 
-const SocialLinks: React.FC = () => (
-  <Flex>
-    {socials.map((social, index) => {
-      const Icon = Icons[social.icon];
-      const iconProps = { width: "24px", color: "textSubtle", style: { cursor: "pointer" } };
-      const mr = index < socials.length - 1 ? "24px" : 0;
-      if (social.items) {
   return (
-          <Dropdown key={social.label} position="top" target={<Icon {...iconProps} mr={mr} />}>
+    <Dropdown position="top-right" target={<Image src={covers} />}>
-            {social.items.map((item) => (
+      {outLink && outLink.length > 0
-              <Link external key={item.label} href={item.href} aria-label={item.label} color="textSubtle">
+        ? outLink?.map((item) => {
-                {item.label}
+            return (
+              <Link href={item.link} color="textSubtle" key={item.id}>
+                <Image src={item.cover} />
               </Link>
-            ))}
+            );
+          })
+        : ""}
     </Dropdown>
   );
-      }
+};
-      return (
-        <Link external key={social.label} href={social.href} aria-label={social.label} mr={mr}>
-          <Icon {...iconProps} />
-        </Link>
-      );
-    })}
-  </Flex>
-);
 
 export default React.memo(SocialLinks, () => true);

packages/pancake-uikit/src/widgets/Menu/types.ts

@@ -54,6 +54,7 @@ export interface PanelProps {
   langs: Language[];
   setLang: (lang: Language) => void;
   links: Array<MenuEntry>;
+  outLink?: OutLink[];
 }
 
 export interface NavProps extends PanelProps {
@@ -62,4 +63,13 @@ export interface NavProps extends PanelProps {
   login?: Login;
   profile?: Profile;
   logout?: () => void;
+  outLink?: OutLink[];
+}
+
+export interface OutLink {
+  id: string;
+  englishName: string;
+  name: string;
+  cover: string;
+  link: string;
 }