Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-07 03:39:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update ad banner

Browse source
This commit is contained in:
Pas 2025-05-16 15:36:31 -06:00
parent abd57f3962
commit 455daf6090
1 changed files with 96 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
src/pages/parts/home/HeroPart.tsx
View file

@ -130,34 +130,102 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
{/* Optional ad */}
{conf().SHOW_AD && !isAdDismissed ? (
<div className="-mb-10 md:-mb-20 w-fit max-w-[16rem] mx-auto relative group pb-4">
<button
onClick={dismissAd}
type="button"
className="absolute -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
aria-label="Dismiss ad"
>
<Icon
className="text-xs font-semibold text-type-secondary"
icon={Icons.X}
/>
</button>
{conf().AD_CONTENT_URL.length !== 0 ? (
<div>
<a href={conf().AD_CONTENT_URL[0]}>
<img src={conf().AD_CONTENT_URL[1]} alt="ad banner" />
</a>
</div>
) : null}
<p className="text-xs text-type-dimmed text-center pt-2 mx-4">
<a
href="https://discord.gg/mcjnJK98Gd"
target="_blank"
rel="noreferrer"
>
Your ad here (づ ᴗ _ᴗ)づ♡
</a>
</p>
<div className="-mb-10 md:-mb-20 w-fit max-w-[32rem] mx-auto relative group pb-4">
{(() => {
const adContentUrl = conf().AD_CONTENT_URL;
// VITE_AD_CONTENT_URL=default message (null will be nothing),referal link,image link, card message
// Ensure adContentUrl is an array. If not, render nothing for ads.
if (!Array.isArray(adContentUrl)) {
return null;
}
const ad1LinkIsValid =
typeof adContentUrl[1] === "string" && adContentUrl[1].length > 0;
const ad1ImageIsProvided = typeof adContentUrl[2] === "string";
const showAd1 =
adContentUrl.length >= 2 && ad1LinkIsValid && ad1ImageIsProvided;
const ad2LinkIsValid =
typeof adContentUrl[3] === "string" && adContentUrl[3].length > 0;
const ad2ImageIsProvided = typeof adContentUrl[4] === "string";
const showAd2 =
adContentUrl.length >= 5 && ad2LinkIsValid && ad2ImageIsProvided;
return (
<>
<div className="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0 justify-center w-full items-center md:items-start">
{showAd1 ? (
<div className="hover:scale-[1.02] max-w-[16rem] bg-opacity-10 bg-buttons-purple backdrop-blur-sm rounded-xl border-2 border-buttons-purple border-opacity-30 transition-all duration-300 hover:border-opacity-70 hover:shadow-lg hover:shadow-buttons-purple/20 md:flex-1 relative group">
<button
onClick={dismissAd}
type="button"
className="absolute z-50 -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
aria-label="Dismiss ad"
>
<Icon
className="text-xs font-semibold text-type-secondary"
icon={Icons.X}
/>
</button>
<a href={adContentUrl[1]} className="block">
<div className="overflow-hidden rounded-t-xl">
<img
src={adContentUrl[2]}
alt="ad banner"
className="w-full h-auto transition-transform duration-300"
/>
</div>
<p className="text-xs text-type-dimmed text-center py-2 transition-colors duration-300 group-hover:text-type-secondary">
<span>{adContentUrl[3]}</span>
</p>
</a>
</div>
) : null}
{showAd2 ? (
<div className="hover:scale-[1.02] max-w-[16rem] bg-opacity-10 bg-buttons-purple backdrop-blur-sm rounded-xl border-2 border-buttons-purple border-opacity-30 transition-all duration-300 hover:border-opacity-70 hover:shadow-lg hover:shadow-buttons-purple/20 md:flex-1 relative group">
<button
onClick={dismissAd}
type="button"
className="absolute z-50 -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
aria-label="Dismiss ad"
>
<Icon
className="text-xs font-semibold text-type-secondary"
icon={Icons.X}
/>
</button>
<a href={adContentUrl[4]} className="block">
<div className="overflow-hidden rounded-t-xl">
<img
src={adContentUrl[5]}
alt="ad banner"
className="w-full h-auto transition-transform duration-300"
/>
</div>
<p className="text-xs text-type-dimmed text-center py-2 transition-colors duration-300 group-hover:text-type-secondary">
<span>{adContentUrl[6]}</span>
</p>
</a>
</div>
) : null}
</div>
{adContentUrl[0] !== "null" && (
<div>
<p className="text-xs text-type-dimmed text-center pt-2 mx-4">
<a
href="https://discord.gg/mcjnJK98Gd"
target="_blank"
rel="noreferrer"
>
{adContentUrl[0]}
</a>
</p>
</div>
)}
</>
);
})()}
</div>
) : null}
{/* End of ad */}