133 lines
3.3 KiB
TypeScript
133 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { SocialLink } from "../types";
|
|
import Flex from "../../../components/Box/Flex";
|
|
import Text from "../../../components/Text/Text";
|
|
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 {
|
|
list: SocialLink[];
|
|
}
|
|
|
|
const Image = styled.img`
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
`;
|
|
const ImageDiv = styled.div`
|
|
position: relative;
|
|
cursor: pointer;
|
|
& > .content {
|
|
display: none;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
width: 140px;
|
|
right: 0px;
|
|
left: 0;
|
|
z-index: 99999;
|
|
bottom: 0;
|
|
margin: 20px auto;
|
|
box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
|
|
}
|
|
:hover {
|
|
& > .content {
|
|
display: block;
|
|
}
|
|
}
|
|
`;
|
|
const ImageItem = styled.div`
|
|
/* padding: 5px 0; */
|
|
position: relative;
|
|
.itemDiv {
|
|
display: none;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
width: 100px;
|
|
right: 0px;
|
|
left: 130px;
|
|
z-index: 99999;
|
|
bottom: 0;
|
|
margin: 20px auto;
|
|
box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
|
|
}
|
|
:hover {
|
|
& > .itemDiv {
|
|
display: block;
|
|
}
|
|
}
|
|
& > .content-item {
|
|
padding: 5px 10px;
|
|
}
|
|
& > .content-item:hover {
|
|
background-color: rgba(112, 112, 112, 0.2);
|
|
}
|
|
`;
|
|
const SingleLink = styled(Link)`
|
|
padding: 5px 10px;
|
|
width: 100%;
|
|
:hover {
|
|
background-color: rgba(112, 112, 112, 0.2);
|
|
}
|
|
`;
|
|
|
|
const MoreIconSvg = styled(MoreIcon)`
|
|
width: 30px;
|
|
height: 30px;
|
|
`;
|
|
const TextDiv = styled(Text)`
|
|
width: 70px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
`;
|
|
|
|
const MoreDropDown: React.FC<Props> = ({ list }) => {
|
|
return (
|
|
<>
|
|
<ImageDiv>
|
|
<div>
|
|
<MoreIconSvg />
|
|
</div>
|
|
<div className="content">
|
|
{list?.map((item) => {
|
|
return item.list && item.list.length > 1 ? (
|
|
<ImageItem key={item.key}>
|
|
<Flex className="content-item" alignItems="center" justifyContent="space-between">
|
|
<>
|
|
<Image src={item.icon} title={item.name} />
|
|
<TextDiv marginLeft="5px">{item.name}</TextDiv>
|
|
</>
|
|
<ChevronRightIcon />
|
|
</Flex>
|
|
<div className="itemDiv">
|
|
{item.list?.map((childItem) => {
|
|
return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
|
|
})}
|
|
</div>
|
|
</ImageItem>
|
|
) : (
|
|
item.list && item.list.length > 0 && (
|
|
<SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
|
|
<Image src={item.icon} title={item.name} />
|
|
<TextDiv marginLeft="5px">{item.name}</TextDiv>
|
|
</SingleLink>
|
|
)
|
|
);
|
|
})}
|
|
</div>
|
|
</ImageDiv>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MoreDropDown;
|