diff --git a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx index 8333d0b..6a4db1d 100644 --- a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx @@ -75,7 +75,10 @@ const Menu: React.FC = ({ 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 = ({ cakePriceUsd={cakePriceUsd} pushNav={setIsPushed} links={links} + outLink={outLink} /> {children} diff --git a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx index 98479af..836f215 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx +++ b/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 = ({ isPushed, @@ -43,6 +51,7 @@ const PanelFooter: React.FC = ({ currentLang, langs, setLang, + outLink, }) => { if (!isPushed) { return ( @@ -53,12 +62,26 @@ const PanelFooter: React.FC = ({ ); } - + let covers = ""; + if (outLink && outLink.length > 0) { + covers = outLink[0].cover; + } return ( - + }> + {outLink && outLink.length > 0 + ? outLink?.map((item) => { + return ( + + + + ); + }) + : ""} + + {/* */} diff --git a/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx b/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx index 65b061e..6cb653c 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx +++ b/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 }; +interface Props { + outLink?: OutLink[]; +} -const SocialLinks: React.FC = () => ( - - {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 ( - }> - {social.items.map((item) => ( - - {item.label} +const Image = styled.img` + width: 30px; + height: 30px; + border-radius: 50%; +`; + +const SocialLinks: React.FC = ({ outLink }) => { + let covers = ""; + if (outLink && outLink.length > 0) { + covers = outLink[0].cover; + } + + return ( + }> + {outLink && outLink.length > 0 + ? outLink?.map((item) => { + return ( + + - ))} - - ); - } - return ( - - - - ); - })} - -); + ); + }) + : ""} + + ); +}; export default React.memo(SocialLinks, () => true); diff --git a/packages/pancake-uikit/src/widgets/Menu/types.ts b/packages/pancake-uikit/src/widgets/Menu/types.ts index edf571d..caf8904 100644 --- a/packages/pancake-uikit/src/widgets/Menu/types.ts +++ b/packages/pancake-uikit/src/widgets/Menu/types.ts @@ -54,6 +54,7 @@ export interface PanelProps { langs: Language[]; setLang: (lang: Language) => void; links: Array; + 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; }