This commit is contained in:
parent
719b5e3a24
commit
efcc53866a
|
|
@ -75,118 +75,8 @@ const Menu: React.FC<NavProps> = ({
|
|||
profile,
|
||||
children,
|
||||
inviteUrl,
|
||||
// outLink,
|
||||
socialLink,
|
||||
}) => {
|
||||
const outLink = [
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "淘宝",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "淘宝1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "淘宝2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "淘宝",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东3",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东3",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东3",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
console.log("outLink-----:", outLink);
|
||||
console.log(setLang);
|
||||
const { isXl } = useMatchBreakpoints();
|
||||
const isMobile = isXl === false;
|
||||
const [isPushed, setIsPushed] = useState(!isMobile);
|
||||
|
|
@ -254,7 +144,7 @@ const Menu: React.FC<NavProps> = ({
|
|||
cakePriceUsd={cakePriceUsd}
|
||||
pushNav={setIsPushed}
|
||||
links={links}
|
||||
outLink={outLink}
|
||||
socialLink={socialLink}
|
||||
/>
|
||||
<Inner isPushed={isPushed} showMenu={showMenu}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import styled from "styled-components";
|
|||
import { CogIcon } from "../../../components/Svg";
|
||||
import IconButton from "../../../components/Button/IconButton";
|
||||
import { MENU_ENTRY_HEIGHT } from "../config";
|
||||
import { PanelProps, PushedProps, OutLink } from "../types";
|
||||
import { PanelProps, PushedProps, SocialLink } from "../types";
|
||||
import CakePrice from "./CakePrice";
|
||||
import ThemeSwitcher from "./ThemeSwitcher";
|
||||
import SocialLinks from "./SocialLinks";
|
||||
|
|
@ -126,20 +126,17 @@ const PanelFooter: React.FC<Props> = ({
|
|||
currentLang,
|
||||
langs,
|
||||
setLang,
|
||||
outLink,
|
||||
socialLink,
|
||||
}) => {
|
||||
console.log("----:", outLink);
|
||||
let covers: string | undefined;
|
||||
let defaultList: OutLink[] | undefined;
|
||||
let moreList: OutLink[] | undefined;
|
||||
if (outLink && outLink.length > 2) {
|
||||
const list = JSON.parse(JSON.stringify(outLink));
|
||||
const listLink = JSON.parse(JSON.stringify(outLink));
|
||||
moreList = list.slice(2, outLink.length);
|
||||
let defaultList: SocialLink[] | undefined;
|
||||
let moreList: SocialLink[] | undefined;
|
||||
if (socialLink && socialLink.length > 2) {
|
||||
const list = JSON.parse(JSON.stringify(socialLink));
|
||||
const listLink = JSON.parse(JSON.stringify(socialLink));
|
||||
moreList = list.slice(2, socialLink.length);
|
||||
defaultList = listLink.splice(0, 2);
|
||||
covers = outLink[0].icon;
|
||||
} else {
|
||||
defaultList = outLink;
|
||||
defaultList = socialLink;
|
||||
}
|
||||
if (!isPushed) {
|
||||
return (
|
||||
|
|
@ -216,59 +213,8 @@ const PanelFooter: React.FC<Props> = ({
|
|||
</div>
|
||||
</ImageDiv>
|
||||
) : (
|
||||
// <Dropdown position="top-right" target={<Text>more</Text>}>
|
||||
// {moreList?.map((item) => {
|
||||
// return (
|
||||
// <ImageDiv>
|
||||
// <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654327831&t=b02514c7e57816af454949c6929e4ecb" />
|
||||
// <div className="content">ee</div>
|
||||
// </ImageDiv>
|
||||
// // <Dropdown
|
||||
// // position="bottom"
|
||||
// // target={
|
||||
// // <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654327831&t=b02514c7e57816af454949c6929e4ecb" />
|
||||
// // }
|
||||
// // >
|
||||
// // {item.list && item.list.length > 0
|
||||
// // ? item.list?.map((childItem) => {
|
||||
// // return (
|
||||
// // <Link href={childItem.link} color="textSubtle">
|
||||
// // <Text>{childItem.name}</Text>
|
||||
// // </Link>
|
||||
// // );
|
||||
// // })
|
||||
// // : ""}
|
||||
// // </Dropdown>
|
||||
// );
|
||||
// })}
|
||||
// </Dropdown>
|
||||
""
|
||||
)}
|
||||
{/* {outLink && outLink.length > 1 ? (
|
||||
<Dropdown position="top-right" target={<Image src={covers} />}>
|
||||
{outLink && outLink.length > 0
|
||||
? outLink?.map((item) => {
|
||||
return (
|
||||
<Link href={item.link} color="textSubtle">
|
||||
<Text>{item.name}</Text>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
: ""}
|
||||
</Dropdown>
|
||||
) : (
|
||||
<>
|
||||
{outLink && outLink.length > 0
|
||||
? outLink?.map((item) => {
|
||||
return (
|
||||
<Link href={item.link} color="textSubtle">
|
||||
<Image src={covers} />
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
: ""}
|
||||
</>
|
||||
)} */}
|
||||
</>
|
||||
</SocialEntry>
|
||||
<SettingsEntry>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ import Text from "../../../components/Text/Text";
|
|||
import * as IconModule from "../icons";
|
||||
import { socials } from "../config";
|
||||
import { LinkLabel } from "./MenuEntry";
|
||||
import { OutLink } from "../types";
|
||||
import { SocialLink } from "../types";
|
||||
|
||||
const Icons = IconModule as unknown as { [key: string]: React.FC<SvgProps> };
|
||||
interface Props {
|
||||
outLink?: OutLink[];
|
||||
socialLink?: SocialLink[];
|
||||
}
|
||||
|
||||
const Image = styled.img`
|
||||
|
|
@ -21,40 +21,8 @@ const Image = styled.img`
|
|||
border-radius: 50%;
|
||||
`;
|
||||
|
||||
const SocialLinks: React.FC<Props> = ({ outLink }) => {
|
||||
// let covers = "";
|
||||
// if (outLink && outLink.length > 0) {
|
||||
// covers = outLink[0].icon;
|
||||
// }
|
||||
return (
|
||||
<>
|
||||
{/* {outLink && outLink.length > 1 ? (
|
||||
<Dropdown position="top-right" target={<Image src={covers} />}>
|
||||
{outLink && outLink.length > 0
|
||||
? outLink?.map((item) => {
|
||||
return (
|
||||
<Link href={item.link} color="textSubtle">
|
||||
<Text>{item.name}</Text>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
: ""}
|
||||
</Dropdown>
|
||||
) : (
|
||||
<>
|
||||
{outLink && outLink.length > 0
|
||||
? outLink?.map((item) => {
|
||||
return (
|
||||
<Link href={item.link} color="textSubtle">
|
||||
<Image src={covers} />
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
: ""}
|
||||
</>
|
||||
)} */}
|
||||
</>
|
||||
);
|
||||
const SocialLinks: React.FC<Props> = ({ socialLink }) => {
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default React.memo(SocialLinks, () => true);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export interface PanelProps {
|
|||
langs: Language[];
|
||||
setLang: (lang: Language) => void;
|
||||
links: Array<MenuEntry>;
|
||||
outLink?: OutLink[];
|
||||
socialLink?: SocialLink[];
|
||||
}
|
||||
|
||||
export interface NavProps extends PanelProps {
|
||||
|
|
@ -63,15 +63,15 @@ export interface NavProps extends PanelProps {
|
|||
login?: Login;
|
||||
profile?: Profile;
|
||||
logout?: () => void;
|
||||
outLink?: OutLink[];
|
||||
socialLink?: SocialLink[];
|
||||
}
|
||||
|
||||
export interface OutLink {
|
||||
export interface SocialLink {
|
||||
icon?: string;
|
||||
name?: string;
|
||||
list?: OutList[];
|
||||
list?: SocialLinkList[];
|
||||
}
|
||||
export interface OutList {
|
||||
export interface SocialLinkList {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
link?: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue