Add sponsor logic for hiding

src/components/PageSponsor.tsx

@@ -5,6 +5,7 @@ import { useStore } from '@nanostores/react';
 import { X } from 'lucide-react';
 import { setViewSponsorCookie } from '../lib/jwt';
 import { isMobile } from '../lib/is-mobile';
+import Cookies from 'js-cookie';
 
 export type PageSponsorType = {
   company: string;
@@ -26,6 +27,22 @@ type PageSponsorProps = {
   gaPageIdentifier?: string;
 };
 
+const CLOSE_SPONSOR_KEY = 'sponsorClosed';
+
+function markSponsorHidden(sponsorId: string) {
+  Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', {
+    path: '/',
+    expires: 1,
+    sameSite: 'lax',
+    secure: true,
+    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
+  });
+}
+
+function isSponsorMarkedHidden(sponsorId: string) {
+  return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1';
+}
+
 export function PageSponsor(props: PageSponsorProps) {
   const { gaPageIdentifier } = props;
   const $isSponsorHidden = useStore(sponsorHidden);
@@ -60,12 +77,16 @@ export function PageSponsor(props: PageSponsorProps) {
       return;
     }
 
-    if (!response?.sponsor) {
+    if (
+      !response?.sponsor ||
+      !response.id ||
+      isSponsorMarkedHidden(response.id)
+    ) {
       return;
     }
 
     setSponsor(response.sponsor);
-    setSponsorId(response?.id || null);
+    setSponsorId(response.id);
 
     window.fireEvent({
       category: 'SponsorImpression',
@@ -84,7 +105,7 @@ export function PageSponsor(props: PageSponsorProps) {
     const { response, error } = await httpPatch<{ status: 'ok' }>(
       clickUrl.toString(),
       {
-        mobile: isMobile() ? true : false,
+        mobile: isMobile(),
       },
     );
 
@@ -111,7 +132,7 @@ export function PageSponsor(props: PageSponsorProps) {
       href={url}
       target="_blank"
       rel="noopener sponsored nofollow"
-      className="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent"
+      className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]"
       onClick={async () => {
         window.fireEvent({
           category: 'SponsorClick',
@@ -122,26 +143,32 @@ export function PageSponsor(props: PageSponsorProps) {
       }}
     >
       <span
-        className="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800"
+        className="absolute right-1 top-1 text-gray-400 hover:text-gray-800 sm:right-1.5 sm:top-1.5 sm:text-gray-300"
         aria-label="Close"
         onClick={(e) => {
           e.preventDefault();
+          markSponsorHidden(sponsorId || '');
           sponsorHidden.set(true);
         }}
       >
-        <X className="h-4 w-4" />
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
       </span>
-      <img
-        src={imageUrl}
-        className="block h-[150px] object-cover lg:h-[169px] lg:w-[118.18px]"
-        alt="Sponsor Banner"
-      />
-      <span className="flex flex-1 flex-col justify-between text-sm">
+      <span>
+        <img
+          src={imageUrl}
+          className="block h-[106px] object-cover sm:h-[169px] sm:w-[118.18px]"
+          alt="Sponsor Banner"
+        />
+      </span>
+      <span className="flex flex-1 flex-col justify-between text-xs sm:text-sm">
         <span className="p-[10px]">
           <span className="mb-0.5 block font-semibold">{title}</span>
           <span className="block text-gray-500">{description}</span>
         </span>
-        <span className="sponsor-footer">Partner Content</span>
+        <span className="sponsor-footer hidden sm:block">Partner Content</span>
+        <span className="block pb-1 text-center text-[10px] uppercase text-gray-400 sm:hidden">
+          Partner Content
+        </span>
       </span>
     </a>
   );

src/styles/global.css

@@ -61,7 +61,6 @@ a > code:before {
   letter-spacing: 0.5px;
   text-transform: uppercase;
   padding: 3px 10px;
-  display: block;
   background: repeating-linear-gradient(
       -45deg,
       transparent,