调整外链

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

@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+import Flex from "../../../components/Box/Flex";
+import Text from "../../../components/Text/Text";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Link from "../../../components/Link/Link";
+import MoreIcon from "../../../components/Svg/Icons/More";
+interface ExternalLinkProps {
+  link?: string;
+  name?: string;
+  icon?: string;
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+const ExternalLink: React.FC<ExternalLinkProps> = ({ link = "", name = "", icon = "" }) => {
+  return (
+    <>
+      <Link external href={link} color="textSubtle">
+        {icon ? <Image src={icon} title={name} /> : <Text>{name}</Text>}
+      </Link>
+    </>
+  );
+};
+
+export default ExternalLink;

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

@@ -14,6 +14,7 @@ import Dropdown from "../../../components/Dropdown/Dropdown";
 import Link from "../../../components/Link/Link";
 import MoreIcon from "../../../components/Svg/Icons/More";
 import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
+import ExternalLink from "./ExternalLink";
 
 interface Props extends PanelProps, PushedProps {}
 
@@ -58,7 +59,7 @@ const ImageDiv = styled.div`
     /* padding: 0 10px; */
     border-radius: 10px;
     position: absolute;
-    width: 100px;
+    width: 140px;
     /* height: 400px; */
     /* top: 0; */
     right: 0px;
@@ -86,7 +87,7 @@ const ImageItem = styled.div`
     position: absolute;
     width: 100px;
     right: 0px;
-    left: 80px;
+    left: 130px;
     z-index: 99999;
     bottom: 0;
     margin: 20px auto;
@@ -116,6 +117,12 @@ const MoreIconSvg = styled(MoreIcon)`
   width: 30px;
   height: 30px;
 `;
+const TextDiv = styled(Text)`
+  width: 70px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
 
 const PanelFooter: React.FC<Props> = ({
   isPushed,
@@ -128,16 +135,17 @@ const PanelFooter: React.FC<Props> = ({
   setLang,
   socialLink,
 }) => {
-  let defaultList: SocialLink[] | undefined;
+  let defaultList = undefined;
-  let moreList: SocialLink[] | undefined;
+  let moreList = undefined;
-  if (socialLink && socialLink.length > 2) {
+  if (socialLink && socialLink.length > 0) {
-    const list = JSON.parse(JSON.stringify(socialLink));
+    defaultList = socialLink.filter((item, index) => {
-    const listLink = JSON.parse(JSON.stringify(socialLink));
+      if (index < 2) return item;
-    moreList = list.slice(2, socialLink.length);
+    });
-    defaultList = listLink.splice(0, 2);
+    moreList = socialLink.filter((item, index) => {
-  } else {
+      if (index >= 2) return item;
-    defaultList = socialLink;
+    });
   }
+
   if (!isPushed) {
     return (
       <Container>
@@ -151,32 +159,21 @@ const PanelFooter: React.FC<Props> = ({
     <Container>
       <SocialEntry>
         <CakePrice cakePriceUsd={cakePriceUsd} />
-
         <>
-          {defaultList && defaultList.length > 0
+          {defaultList?.map((item) => {
-            ? defaultList.map((item) => {
             return item.list && item.list.length > 1 ? (
               <Dropdown position="top-right" target={<Image src={item.icon} title={item.name} />}>
-                    {item.list && item.list.length > 0
+                {item.list?.map((childItem) => {
-                      ? item.list?.map((childItem) => {
+                  return <ExternalLink link={childItem.link} name={childItem.name} />;
-                          return (
+                })}
-                            <Link key={item.key} external href={childItem.link} color="textSubtle">
-                              <Text>{childItem.name}</Text>
-                            </Link>
-                          );
-                        })
-                      : ""}
               </Dropdown>
-                ) : item.list && item.list.length > 0 ? (
+            ) : item.list ? (
-                  <Link key={item.key} external href={item.list[0].link} color="textSubtle">
+              <ExternalLink link={item.list[0].link} icon={item.icon} name={item.name} />
-                    <Image src={item.icon} title={item.name} />
-                  </Link>
             ) : (
               ""
             );
-              })
+          })}
-            : ""}
+          {moreList ? (
-          {moreList && moreList.length > 0 ? (
             <ImageDiv>
               <div className="moreText">
                 <MoreIconSvg />
@@ -188,17 +185,13 @@ const PanelFooter: React.FC<Props> = ({
                       <Flex className="content-item" alignItems="center" justifyContent="space-between">
                         <>
                           <Image src={item.icon} title={item.name} />
-                          <Text marginLeft="5px">{item.name}</Text>
+                          <TextDiv marginLeft="5px">{item.name}</TextDiv>
                         </>
                         <ChevronRightIcon />
                       </Flex>
                       <div className="itemDiv">
                         {item.list?.map((childItem) => {
-                          return (
+                          return <ExternalLink link={childItem.link} name={childItem.name} />;
-                            <Link external href={childItem.link} color="textSubtle">
-                              <Text>{childItem.name}</Text>
-                            </Link>
-                          );
                         })}
                       </div>
                     </ImageItem>