Kamran Ahmed
2 years ago
parent
4063979c2a
commit
057bbddd9f
14 changed files with 931 additions and 570 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,89 @@ |
||||
import { useStore } from '@nanostores/preact'; |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
import CloseIcon from '../icons/close.svg'; |
||||
import { sponsorHidden } from '../stores/page'; |
||||
|
||||
export type PageSponsorType = { |
||||
url: string; |
||||
title: string; |
||||
imageUrl: string; |
||||
description: string; |
||||
company: string; |
||||
page: string; |
||||
}; |
||||
|
||||
type PageSponsorProps = { |
||||
sponsors?: PageSponsorType[]; |
||||
}; |
||||
|
||||
export function PageSponsor(props: PageSponsorProps) { |
||||
const { sponsors = [] } = props; |
||||
const $isSponsorHidden = useStore(sponsorHidden); |
||||
const [sponsor, setSponsor] = useState<PageSponsorType>(); |
||||
|
||||
if (sponsors.length === 0) { |
||||
return null; |
||||
} |
||||
|
||||
function loadSponsor() { |
||||
console.log('loadSponsor'); |
||||
|
||||
const sponsorIndex = Math.floor(Math.random() * sponsors.length); |
||||
setSponsor(sponsors[sponsorIndex]); |
||||
} |
||||
|
||||
// We load the sponsor after 1second of the page load
|
||||
useEffect(() => { |
||||
const timer = window.setTimeout(loadSponsor, 500); |
||||
return () => window.clearTimeout(timer); |
||||
}, []); |
||||
|
||||
if ($isSponsorHidden || !sponsor) { |
||||
return null; |
||||
} |
||||
|
||||
const { url, title, imageUrl, description, company, page } = sponsor; |
||||
|
||||
return ( |
||||
<a |
||||
href={url} |
||||
target="_blank" |
||||
rel="noopener sponsored nofollow" |
||||
class="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent" |
||||
onClick={() => { |
||||
window.fireEvent({ |
||||
category: 'SponsorClick', |
||||
action: `${company} Redirect`, |
||||
label: `${page} / ${company} Link`, |
||||
}); |
||||
}} |
||||
> |
||||
<span |
||||
class="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800" |
||||
aria-label="Close" |
||||
aria-role="button" |
||||
close-sponsor |
||||
onClick={(e) => { |
||||
e.preventDefault(); |
||||
e.stopImmediatePropagation(); |
||||
|
||||
sponsorHidden.set(true); |
||||
}} |
||||
> |
||||
<img alt="Close" class="h-4 w-4" src={CloseIcon} /> |
||||
</span> |
||||
<img |
||||
src={imageUrl} |
||||
class="block h-[150px] w-[104.89px] object-contain lg:h-[169px] lg:w-[118.18px]" |
||||
alt="Sponsor Banner" |
||||
/> |
||||
<span class="flex flex-1 flex-col justify-between text-sm"> |
||||
<span class="p-[10px]"> |
||||
<span class="mb-0.5 block font-semibold">{title}</span> |
||||
<span class="block text-gray-500">{description}</span> |
||||
</span> |
||||
<span class="sponsor-footer">Partner Content</span> |
||||
</span> |
||||
</a> |
||||
); |
||||
} |
||||
|
Before Width: | Height: | Size: 393 B After Width: | Height: | Size: 388 B |
Loading…
Reference in new issue