// 1
// the extension for this component is to use .tsx, typescript
//example SocialShare.tsx
import React, { useState, useRef } from 'react';
import { keyframes, css } from '@emotion/react';
import styled from '@emotion/styled';
import useOnClickOutside from '../../helpers/useOnClickOutside';
const DropDownContainer = styled.div`
width: auto;
margin: 0 auto;
text-align: center;
`;
const rotateMenu = keyframes`
0% {
transform: rotateX(90deg)
}
100% {
transform: rotateX(0)
}
`;
const DropDownHeader = styled.button`
font-weight: 500;
border: 0;
background: transparent;
color: #333333;
// text-decoration: underline dotted;
// text-underline-offset: 2px;
cursor: pointer;
:focus:not(:focus-visible) {
outline: none;
}
`;
const DropDownListContainer = styled.div`
position: absolute;
z-index: 100;
width: 200px;
height: auto;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-shadow: rgb(0 0 0 / 15%) 0px 10px 37px;
animation: ${rotateMenu} 300ms ease;
transform-origin: top center;
&::-webkit-scrollbar {
display: none;
}
`;
const DropDownList = styled.ul`
padding: 0;
margin: 0;
background: #ffffff;
box-sizing: border-box;
color: #333333;
font-weight: 400;
&:first-child {
padding-top: 0;
}
`;
type ListItemProps = {
checked?: boolean;
};
const ListItem = styled.li<ListItemProps>`
list-style: none;
padding: 2px 16px;
cursor: pointer;
color: ${props => (props.checked === true ? '#fff' : 'inherit')};
background: ${props => (props.checked === true ? '#333333' : 'transparent')};
&:hover {
color: #333333;
background-color: #dce8fe;
}
`;
function SocialShare() {
const facebook = () => {
window.open(
// 'http://facebook.com/sharer.php?u=' + window.location.href,
// +'targetWindow',
// 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
`http://facebook.com/sharer.php?u=${window.location.href}`,
'_blank',
);
};
const twitter = () => {
// window.open(
// 'http://twitter.com/share?url=' + window.location.href,
// +'targetWindow',
// 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
// );
window.open(
`http://twitter.com/share?url=${window.location.href}`,
'_blank',
);
};
const linkedin = () => {
window.open(
// 'https://www.linkedin.com/shareArticle?url=' + window.location.href,
// +'&min=1',
// 'targetWindow',
// 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
`https://www.linkedin.com/shareArticle?url=${window.location.href},&min=1`,
'_blank',
);
};
const whatsapp = () => {
const wText = "I've found this on EXAMPLE.COM. cool init?\n";
window.open(
// `https://wa.me/?text=${wText}${window.location.href}`,
// +'targetWindow',
// 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
`https://wa.me/?text=${wText}${window.location.href}`,
'_blank',
);
};
}
export default SocialShare;
// 2
// add SocialShare component into main component, as shown on the following example
// mainComponent.jsx
import SocialShare from '../global/SocialShare';
return (
<>
<SocialShare/>
</>