1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
import Script from 'next/script';
import { FC, useId } from 'react';
 
type AdComponent = FC<{
    slot: string;
    client?: string;
}>;
 
/**
 * @description - The adsense will be rendered only in production mode and horizontal only on mobile
 *
 * @example
 *     <GoogleAdsense slot="1234567890" />;
 *
 * @param {string} client - The client id
 * @param {string} slot - The slot id
 * @returns {JSX.Element}
 */
 
export const GoogleAdsense: AdComponent = ({ client = 'ca-pub-3537017956623483', slot }) => {
    const id = useId();
    return (
        <>
            <ins
                aria-hidden="true"
                title="Google Adsense"
                className="adsbygoogle"
                style={{
                    display: 'block',
                }}
                data-ad-client={client}
                data-ad-slot={slot}
                data-ad-format="auto"
                data-full-width-responsive="true"
            />
            <Script
                async
                id={id + '#' + slot}
                dangerouslySetInnerHTML={{
                    __html: `(adsbygoogle = window.adsbygoogle || []).push({});`,
                }}
            />
        </>
    );
};
 
export default GoogleAdsense;