1- import { X } from 'lucide-react'
2- import { useEffect , useState } from 'react'
3- import { useTranslation } from 'react-i18next'
4- import { Button } from '@/components/ui/button'
5- import { cn } from '@/lib/utils'
61import { useTheme } from '@/components/common/theme-provider'
2+ import { Button } from '@/components/ui/button'
73import { getGradientByColorTheme } from '@/constants/ThemeGradients'
84import useDirDetection from '@/hooks/use-dir-detection'
5+ import { cn } from '@/lib/utils'
6+ import { X } from 'lucide-react'
7+ import { useEffect , useState } from 'react'
8+ import { useTranslation } from 'react-i18next'
99
1010const TOPBAR_AD_STORAGE_KEY = 'topbar_ad_closed'
1111const HOURS_TO_HIDE = 24
@@ -33,7 +33,6 @@ interface CachedAdData {
3333 is404 : boolean
3434}
3535
36-
3736export default function TopbarAd ( ) {
3837 const { i18n } = useTranslation ( )
3938 const { resolvedTheme, colorTheme } = useTheme ( )
@@ -69,7 +68,7 @@ export default function TopbarAd() {
6968
7069 const checkShouldFetch = ( ) => {
7170 const closedTimestamp = localStorage . getItem ( TOPBAR_AD_STORAGE_KEY )
72-
71+
7372 if ( ! closedTimestamp ) {
7473 return true
7574 }
@@ -108,15 +107,15 @@ export default function TopbarAd() {
108107 const githubApiUrl = 'https://api.github.com/repos/pasarguard/ads/contents/config'
109108 const response = await fetch ( githubApiUrl , {
110109 cache : 'no-cache' ,
110+ referrerPolicy : 'no-referrer' ,
111+ credentials : 'omit' ,
111112 } )
112113 if ( response . ok ) {
113114 const apiData = await response . json ( )
114115 if ( apiData . content && apiData . encoding === 'base64' ) {
115116 const base64Content = apiData . content . replace ( / \n / g, '' )
116117 const binaryString = atob ( base64Content )
117- const utf8String = decodeURIComponent (
118- Array . from ( binaryString , ( char ) => '%' + ( '00' + char . charCodeAt ( 0 ) . toString ( 16 ) ) . slice ( - 2 ) ) . join ( '' )
119- )
118+ const utf8String = decodeURIComponent ( Array . from ( binaryString , char => '%' + ( '00' + char . charCodeAt ( 0 ) . toString ( 16 ) ) . slice ( - 2 ) ) . join ( '' ) )
120119 const data = JSON . parse ( utf8String )
121120 setCache ( data , false )
122121 setConfig ( data )
@@ -146,10 +145,13 @@ export default function TopbarAd() {
146145 }
147146
148147 if ( 'requestIdleCallback' in window ) {
149- requestIdleCallback ( ( ) => {
150- setIsLoading ( true )
151- loadConfig ( )
152- } , { timeout : 2000 } )
148+ requestIdleCallback (
149+ ( ) => {
150+ setIsLoading ( true )
151+ loadConfig ( )
152+ } ,
153+ { timeout : 2000 } ,
154+ )
153155 } else {
154156 setTimeout ( ( ) => {
155157 setIsLoading ( true )
@@ -231,12 +233,10 @@ export default function TopbarAd() {
231233 return (
232234 < div
233235 className = { cn (
234- 'relative z-[25] lg:z-30 w-full border-b border-border/40 backdrop-blur-sm' ,
236+ 'relative z-[25] w-full border-b border-border/40 backdrop-blur-sm lg:z-30 ' ,
235237 gradientBg ,
236238 'overflow-hidden' ,
237- isClosing
238- ? 'max-h-0 opacity-0 -translate-y-2 border-0 py-0'
239- : 'max-h-32 sm:max-h-36'
239+ isClosing ? 'max-h-0 -translate-y-2 border-0 py-0 opacity-0' : 'max-h-32 sm:max-h-36' ,
240240 ) }
241241 style = { {
242242 transition : isClosing
@@ -251,54 +251,46 @@ export default function TopbarAd() {
251251 onClick = { handleTopbarClick }
252252 target = "_blank"
253253 rel = "noopener noreferrer"
254- className = { cn (
255- 'block w-full cursor-pointer transition-all duration-200 ease-in-out hover:opacity-95 hover:brightness-[1.02]' ,
256- isRTL ? 'pl-10 sm:pl-12' : 'pr-10 sm:pr-12'
257- ) }
254+ className = { cn ( 'block w-full cursor-pointer transition-all duration-200 ease-in-out hover:opacity-95 hover:brightness-[1.02]' , isRTL ? 'pl-10 sm:pl-12' : 'pr-10 sm:pr-12' ) }
258255 >
259- < div className = { cn (
260- 'mx-auto flex max-w-[1920px] items-center gap-2.5 px-3 py-2.5 sm:px-4' ,
261- isRTL ? 'justify-between' : 'justify-center'
262- ) } >
263- < div className = { cn (
264- 'flex flex-1 items-center gap-2 sm:gap-3 text-xs sm:text-sm min-w-0' ,
265- isRTL ? 'justify-start' : 'justify-center'
266- ) } >
256+ < div className = { cn ( 'mx-auto flex max-w-[1920px] items-center gap-2.5 px-3 py-2.5 sm:px-4' , isRTL ? 'justify-between' : 'justify-center' ) } >
257+ < div className = { cn ( 'flex min-w-0 flex-1 items-center gap-2 text-xs sm:gap-3 sm:text-sm' , isRTL ? 'justify-start' : 'justify-center' ) } >
267258 { iconUrl && ! iconError && (
268259 < img
269260 src = { iconUrl }
270261 alt = ""
271- className = "h-5 w-5 shrink-0 object-contain rounded text-foreground/75"
262+ className = "h-5 w-5 shrink-0 rounded object-contain text-foreground/75"
272263 onLoad = { ( ) => setIconLoaded ( true ) }
273264 onError = { ( ) => setIconError ( true ) }
274265 style = { { display : iconLoaded ? 'block' : 'none' } }
275266 />
276267 ) }
277- < span className = { cn (
278- 'text-foreground/75 line-clamp-2 flex-1' ,
279- isRTL ? 'text-center sm:text-right' : 'text-center sm:text-left'
280- ) } >
268+ < span className = { cn ( 'line-clamp-2 flex-1 text-foreground/75' , isRTL ? 'text-center sm:text-right' : 'text-center sm:text-left' ) } >
281269 < span className = "hidden sm:inline" > { translations . text } </ span >
282270 < span className = "sm:hidden" > { translations . textMobile } </ span >
283271 </ span >
284272 </ div >
285- < div className = "flex items-center shrink-0" >
286- < span className = { cn (
287- 'shrink-0 hidden sm:inline whitespace-nowrap' ,
288- 'px-2.5 py-1 rounded-md text-xs font-medium' ,
289- 'bg-primary text-primary-foreground hover:bg-primary/90' ,
290- 'transition-colors duration-200 ease-in-out' ,
291- 'shadow-sm hover:shadow'
292- ) } >
273+ < div className = "flex shrink-0 items-center" >
274+ < span
275+ className = { cn (
276+ 'hidden shrink-0 whitespace-nowrap sm:inline' ,
277+ 'rounded-md px-2.5 py-1 text-xs font-medium' ,
278+ 'bg-primary text-primary-foreground hover:bg-primary/90' ,
279+ 'transition-colors duration-200 ease-in-out' ,
280+ 'shadow-sm hover:shadow' ,
281+ ) }
282+ >
293283 { translations . linkText }
294284 </ span >
295- < span className = { cn (
296- 'shrink-0 sm:hidden whitespace-nowrap' ,
297- 'px-2 py-0.5 rounded-md text-xs font-medium' ,
298- 'bg-primary text-primary-foreground hover:bg-primary/90' ,
299- 'transition-colors duration-200 ease-in-out' ,
300- 'shadow-sm hover:shadow'
301- ) } >
285+ < span
286+ className = { cn (
287+ 'shrink-0 whitespace-nowrap sm:hidden' ,
288+ 'rounded-md px-2 py-0.5 text-xs font-medium' ,
289+ 'bg-primary text-primary-foreground hover:bg-primary/90' ,
290+ 'transition-colors duration-200 ease-in-out' ,
291+ 'shadow-sm hover:shadow' ,
292+ ) }
293+ >
302294 { translations . linkTextMobile }
303295 </ span >
304296 </ div >
@@ -312,9 +304,9 @@ export default function TopbarAd() {
312304 className = { cn (
313305 'absolute top-1/2 -translate-y-1/2' ,
314306 isRTL ? 'left-3 sm:left-4' : 'right-3 sm:right-4' ,
315- 'h-7 w-7 shrink-0 rounded hover:bg-muted/40 transition-all z-10 ' ,
307+ 'z-10 h-7 w-7 shrink-0 rounded transition-all hover:bg-muted/40' ,
316308 'text-muted-foreground/70 hover:text-foreground' ,
317- 'touch-manipulation'
309+ 'touch-manipulation' ,
318310 ) }
319311 aria-label = "Close ad"
320312 >
@@ -323,4 +315,3 @@ export default function TopbarAd() {
323315 </ div >
324316 )
325317}
326-
0 commit comments