diff --git a/src/components/AdTest/index.tsx b/src/components/AdTest/index.tsx new file mode 100644 index 0000000..67ebe97 --- /dev/null +++ b/src/components/AdTest/index.tsx @@ -0,0 +1,199 @@ +import React from "react"; +import styled from "styled-components"; + +const AdWrapper = styled.div` + z-index: 1000; + + .sticky-js { + display: flex; + justify-content: center; + z-index: 1000; + position: relative; + + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, + Cantarell, "Helvetica Neue", sans-serif; + } + + #sticky-js._bsa_hide { + display: none; + } + + #sticky-js .native-hide { + position: absolute; + top: -6px; + right: -6px; + padding: 4px 5.42px; + + font-size: 12px; + line-height: 1; + cursor: pointer; + border-radius: 50%; + } + + #sticky-js { + position: fixed; + bottom: 60px; + right: 10%; + } + + #sticky-js .sticky-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + + max-width: 600px; + text-decoration: none; + border-radius: 10px; + box-shadow: inset 0 0 2px hsla(0, 0%, 0%, 0.15); + + flex-flow: row nowrap; + } + + #sticky-js .native-img { + margin-right: 20px; + + line-height: 0; + max-height: 40px; + } + + #sticky-js .native-main { + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + + flex-grow: 1; + flex-flow: row nowrap; + } + + #sticky-js .native-details { + display: flex; + margin-right: 20px; + + flex-flow: column nowrap; + } + + #sticky-js .native-tagline { + margin-bottom: 3px; + + font-size: 9px; + font-weight: 600; + line-height: 1; + letter-spacing: 1.5px; + text-transform: uppercase; + } + + #sticky-js .native-desc { + font-size: 12px; + font-weight: 400; + line-height: 1.4; + max-width: 600px; + letter-spacing: 1px; + } + + #sticky-js .native-cta { + padding: 10px 16px; + + font-size: 10px; + font-weight: 600; + line-height: 1; + transition: all 0.3s ease-in-out; + transform: translateY(-1px); + white-space: nowrap; + letter-spacing: 1px; + text-transform: uppercase; + border-radius: 3px; + } + + #sticky-js .native-via { + position: absolute; + right: 0; + bottom: 0; + padding: 5px 10px; + + font-size: 8px; + font-weight: 600; + line-height: 1; + text-decoration: none; + letter-spacing: 0.7px; + text-transform: uppercase; + color: #444; + border-top: 0; + border-top-left-radius: 3px; + background: repeating-linear-gradient( + -45deg, + transparent, + transparent 5px, + hsla(0, 0%, 0%, 0.025) 5px, + hsla(0, 0%, 0%, 0.025) 10px + ) + hsla(203, 11%, 95%, 0.4); + } + + @media only screen and (min-width: 320px) and (max-width: 759px) { + #sticky-js, + #sticky-js .native-main { + flex-flow: column nowrap; + } + + #sticky-js .native-img, + #sticky-js .native-details { + margin: 0; + } + + #sticky-js .native-img { + display: none; + } + + #sticky-js .native-company { + letter-spacing: 1px; + } + + #sticky-js .native-details { + font-size: 14px; + text-align: left; + } + + #sticky-js .native-cta { + display: none; + } + } +`; + +const template = `${"`"} + +
+ +
+ Sponsored by ##company## + ##description## +
+ ##callToAction## +
+
+
+${"`"}`; + +export const AdTest = () => { + const ref = React.useRef(null!); + + React.useEffect(() => { + if (window.innerWidth < 660) return; + ref.current.innerHTML = ""; + const s = document.createElement("script"); + s.id = "_carbonads_js"; + s.innerHTML = `(function() { + if (typeof _bsa !== 'undefined' && _bsa) { + _bsa.init('custom', 'CWYD42JI', 'placement:jsoncrackcom', { + target: '.sticky-js', + id: 'sticky-js', + template: ${template} + }); + } + })();`; + ref.current.appendChild(s); + }, []); + + return ; +}; diff --git a/src/components/CarbonAds/index.tsx b/src/components/CarbonAds/index.tsx index 97a2d91..ae8b05f 100644 --- a/src/components/CarbonAds/index.tsx +++ b/src/components/CarbonAds/index.tsx @@ -1,6 +1,4 @@ import React from "react"; -import Script from "next/script"; -import { IoMdClose } from "react-icons/io"; import styled from "styled-components"; const StyledCloseBtn = styled.button` @@ -52,35 +50,16 @@ const StyledWrapper = styled.span<{ editor?: boolean }>` } `; -export const CarbonAds: React.FC<{ editor?: boolean }> = ({ editor = false }) => { - const [isHidden, setIsHidden] = React.useState(false); +export const CarbonAds = () => { + const ref = React.useRef(null!); - if (isHidden) return null; + React.useEffect(() => { + ref.current.innerHTML = ""; + const s = document.createElement("script"); + s.id = "_carbonads_js"; + s.src = `//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom`; + ref.current.appendChild(s); + }, []); - return ( - - {editor && ( - setIsHidden(true)}> - - - )} -