add publicity space

xhendyagsx · Mar 15, 2021 · 5ce42fb · 5ce42fb
1 parent 6f09b90
commit 5ce42fb
Show file tree

Hide file tree

Showing 31 changed files with 177 additions and 99 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/components/layout/ComponentLayout.tsx b/components/layout/ComponentLayout.tsx
@@ -19,6 +19,7 @@ interface Props {
     vertical?: boolean;
     containerClasses?: string;
     fullscreen?: boolean;
+    withPub?: boolean;
 }
 
 enum STATUS {
@@ -94,36 +95,21 @@ const ComponentLayout = (props: Props) => {
 
     const [status, setStatus] = useState<STATUS>(STATUS.DEFAULT);
     return (
-        <div
-            className={`bg-gray-100 shadow rounded-xl mb-4 ${props.containerClasses ? props.containerClasses : ''}`}
-            key={props.title}
-        >
-            <div className="flex flex-col md:flex-row items-center justify-between bg-white p-4 border rounded-xl">
-                <p className="text-xl font-light text-gray-600 mb-2 md:mb-0">{props.title} </p>
-                <div className="flex items-center flex-row flex-wrap gap-4 justify-center">
-                    {props.showSwitchMode && <Toggle label="Dark mode" onChange={(mode) => changeMode(mode)} />}
-
-                    {props.jsLink && (
-                        <a
-                            className="flex items-center text-black border border-gray-800 bg-yellow-300 hover:bg-yellow-400 rounded-lg p-2"
-                            href={props.jsLink}
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                fill="currentColor"
-                                className=" w-6 h-6 mr-2"
-                                viewBox="0 0 1792 1792"
+        <>
+            <div
+                className={`bg-gray-100 shadow rounded-xl mb-4 ${props.containerClasses ? props.containerClasses : ''}`}
+                key={props.title}
+            >
+                <div className="flex flex-col md:flex-row items-center justify-between bg-white p-4 border rounded-xl">
+                    <p className="text-xl font-light text-gray-600 mb-2 md:mb-0">{props.title} </p>
+                    <div className="flex items-center flex-row flex-wrap gap-4 justify-center">
+                        {props.showSwitchMode && <Toggle label="Dark mode" onChange={(mode) => changeMode(mode)} />}
+
+                        {props.jsLink && (
+                            <a
+                                className="flex items-center text-black border border-gray-800 bg-yellow-300 hover:bg-yellow-400 rounded-lg p-2"
+                                href={props.jsLink}
                             >
-                                <path d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z" />
-                            </svg>
-                            Need JS
-                        </a>
-                    )}
-                    {props.needConfiguration && (
-                        <Link href="/started#configuration">
-                            <a className="flex items-center text-black border border-gray-800 bg-yellow-300 hover:bg-yellow-400 rounded-lg p-2">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     width="20"
@@ -134,75 +120,116 @@ const ComponentLayout = (props: Props) => {
                                 >
                                     <path d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z" />
                                 </svg>
-                                Need configuration
+                                Need JS
                             </a>
-                        </Link>
-                    )}
-                    <div className="w-32">
-                        <button
-                            onClick={() => setStatus(STATUS.EDIT_CODE)}
-                            className="w-28 flex items-center justify-between px-4 py-2 border border-gray-800  text-base font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100"
-                        >
-                            <svg
-                                width="20"
-                                height="20"
-                                fill="currentColor"
-                                viewBox="0 0 2048 1792"
-                                xmlns="http://www.w3.org/2000/svg"
+                        )}
+                        {props.needConfiguration && (
+                            <Link href="/started#configuration">
+                                <a className="flex items-center text-black border border-gray-800 bg-yellow-300 hover:bg-yellow-400 rounded-lg p-2">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="20"
+                                        height="20"
+                                        fill="currentColor"
+                                        className=" w-6 h-6 mr-2"
+                                        viewBox="0 0 1792 1792"
+                                    >
+                                        <path d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z" />
+                                    </svg>
+                                    Need configuration
+                                </a>
+                            </Link>
+                        )}
+                        <div className="w-32">
+                            <button
+                                onClick={() => setStatus(STATUS.EDIT_CODE)}
+                                className="w-28 flex items-center justify-between px-4 py-2 border border-gray-800  text-base font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100"
                             >
-                                <path d="M681 1399l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23t-10 23zm591-1067l-373 1291q-4 13-15.5 19.5t-23.5 2.5l-62-17q-13-4-19.5-15.5t-2.5-24.5l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z" />
-                            </svg>
-                            code
-                        </button>
-                    </div>
+                                <svg
+                                    width="20"
+                                    height="20"
+                                    fill="currentColor"
+                                    viewBox="0 0 2048 1792"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path d="M681 1399l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23t-10 23zm591-1067l-373 1291q-4 13-15.5 19.5t-23.5 2.5l-62-17q-13-4-19.5-15.5t-2.5-24.5l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z" />
+                                </svg>
+                                code
+                            </button>
+                        </div>
 
-                    {COPY_BTN()}
+                        {COPY_BTN()}
+                    </div>
                 </div>
-            </div>
 
-            <LiveProvider
-                scope={scope}
-                theme={EDITOR_THEME}
-                disabled={status !== STATUS.EDIT_CODE}
-                language="markup"
-                code={code()}
-            >
-                <div
-                    className={`${
-                        props.vertical ? 'flex-col justify-center' : 'flex-col md:flex-row justify-between '
-                    } flex gap-4 items-start ${props.fullscreen ? '' : 'mx-4 py-12'}`}
+                <LiveProvider
+                    scope={scope}
+                    theme={EDITOR_THEME}
+                    disabled={status !== STATUS.EDIT_CODE}
+                    language="markup"
+                    code={code()}
                 >
-                    <div ref={previewRef} className={`${props.vertical ? 'w-full ' : ''}mx-auto`}>
-                        <LivePreview />
-                    </div>
+                    <div
+                        className={`${
+                            props.vertical ? 'flex-col justify-center' : 'flex-col md:flex-row justify-between '
+                        } flex gap-4 items-start ${props.fullscreen ? '' : 'mx-4 py-12'}`}
+                    >
+                        <div ref={previewRef} className={`${props.vertical ? 'w-full ' : ''}mx-auto`}>
+                            <LivePreview />
+                        </div>
 
-                    {status !== STATUS.DEFAULT && (
-                        <div className={`${props.vertical ? '' : 'md:w-3/4'} relative w-full`}>
-                            <div>
-                                <div className="absolute top-2 right-24 z-10">{COPY_BTN()}</div>
+                        {status !== STATUS.DEFAULT && (
+                            <div className={`${props.vertical ? '' : 'md:w-3/4'} relative w-full`}>
+                                <div>
+                                    <div className="absolute top-2 right-24 z-10">{COPY_BTN()}</div>
 
-                                <button
-                                    onClick={() => setStatus(STATUS.DEFAULT)}
-                                    className="w-12 p-2 absolute top-2 right-2 z-30 text-base font-medium rounded-md bg-red-300 hover:bg-red-400 "
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="6"
-                                        height="6"
-                                        className="h-6 w-6 mx-auto text-gray-800 "
-                                        fill="currentColor"
-                                        viewBox="0 0 1792 1792"
+                                    <button
+                                        onClick={() => setStatus(STATUS.DEFAULT)}
+                                        className="w-12 p-2 absolute top-2 right-2 z-30 text-base font-medium rounded-md bg-red-300 hover:bg-red-400 "
                                     >
-                                        <path d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
-                                    </svg>
-                                </button>
-                                <LiveEditor className="rounded-lg" />
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="6"
+                                            height="6"
+                                            className="h-6 w-6 mx-auto text-gray-800 "
+                                            fill="currentColor"
+                                            viewBox="0 0 1792 1792"
+                                        >
+                                            <path d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
+                                        </svg>
+                                    </button>
+                                    <LiveEditor className="rounded-lg" />
+                                </div>
                             </div>
-                        </div>
-                    )}
+                        )}
+                    </div>
+                </LiveProvider>
+            </div>
+            {props.withPub && (
+                <div
+                    className={`bg-gray-100 shadow rounded-xl mb-4 ${
+                        props.containerClasses ? props.containerClasses : ''
+                    }`}
+                    key={props.title}
+                >
+                    <div className="flex flex-col md:flex-row items-center justify-between bg-white p-4 border rounded-xl">
+                        <p className="text-xl font-light text-gray-600 mb-2 md:mb-0">Publicity </p>
+                        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+                    </div>
+                    <div className="p-4">
+                        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                        <ins
+                            className="adsbygoogle"
+                            style={{ display: 'block' }}
+                            data-ad-format="fluid"
+                            data-ad-layout-key="-6t+ed+2i-1n-4w"
+                            data-ad-client="ca-pub-9198515375847190"
+                            data-ad-slot="5049524770"
+                        ></ins>
+                    </div>
                 </div>
-            </LiveProvider>
-        </div>
+            )}
+        </>
     );
 };
 

diff --git a/components/site/section/SectionDesc.tsx b/components/site/section/SectionDesc.tsx
@@ -60,18 +60,32 @@ const SectionDesc = ({ title, items, id, hasCommingSoon, isTemplate }: Props) =>
                         </div>
                     );
                 })}
-                {hasCommingSoon && (
-                    <div className="opacity-50 border border rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5">
-                        <div className="">
-                            <img
-                                src="/images/sections/coming.gif"
-                                alt="coming soon"
-                                className="rounded-lg w-full object-cover w-60 md:h-36 opacity-90 hover:opacity-100"
-                            />
-                            <p className="text-gray-700 text-sm p-2">More items will coming soon...</p>
+                <>
+                    {hasCommingSoon && (
+                        <div className="opacity-50 border border rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5">
+                            <div className="">
+                                <img
+                                    src="/images/sections/coming.gif"
+                                    alt="coming soon"
+                                    className="rounded-lg w-full object-cover w-60 md:h-36 opacity-90 hover:opacity-100"
+                                />
+                                <p className="text-gray-700 text-sm p-2">More items will coming soon...</p>
+                            </div>
                         </div>
+                    )}
+                    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                    <div className="opacity-100 rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5">
+                        <ins
+                            className="adsbygoogle"
+                            style={{ display: 'block' }}
+                            data-ad-client="ca-pub-9198515375847190"
+                            data-ad-slot="5242587151"
+                            data-ad-format="auto"
+                            data-full-width-responsive="true"
+                        ></ins>
+                        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
                     </div>
-                )}
+                </>
             </div>
         </div>
     );

diff --git a/pages/components/alert/index.tsx b/pages/components/alert/index.tsx
@@ -53,6 +53,7 @@ const AlertPage: FC = () => {
             />
 
             <ComponentLayout
+                withPub
                 vertical={true}
                 title="Cookie alert"
                 showSwitchMode={true}
@@ -119,6 +120,7 @@ const AlertPage: FC = () => {
                 component={InformationModale}
             />
             <ComponentLayout
+                withPub
                 vertical={true}
                 title="Modale with footer actions"
                 element={

diff --git a/pages/components/avatar/index.tsx b/pages/components/avatar/index.tsx
@@ -15,11 +15,12 @@ const AvatarPage: FC = () => {
             <ComponentLayout title="Simple full rounded avatar" element={<Avatar />} component={Avatar} />
             <ComponentLayout title="small full rounded avatar" element={<Avatar size="small" />} component={Avatar} />
             <ComponentLayout title="Big full rounded avatar" element={<Avatar size="big" />} component={Avatar} />
-            <ComponentLayout title="Round avatar" element={<Avatar type="rounded" />} component={Avatar} />
+            <ComponentLayout withPub title="Round avatar" element={<Avatar type="rounded" />} component={Avatar} />
             <ComponentLayout title="Square avatar" element={<Avatar type="square" />} component={Avatar} />
             <ComponentLayout title="Avatar with badge" element={<Avatar withInfo={true} />} component={Avatar} />
             <ComponentLayout title="Multiple avatar" element={<MultipleAvatar />} component={MultipleAvatar} />
             <ComponentLayout
+                withPub
                 title="Multiple small avatar"
                 element={<MultipleAvatar size="small" />}
                 component={MultipleAvatar}

diff --git a/pages/components/badges/index.tsx b/pages/components/badges/index.tsx
@@ -84,6 +84,7 @@ const BadgesPage: FC = () => {
                 component={Badge}
             />
             <ComponentLayout
+                withPub
                 title="Stroke with icon"
                 element={
                     <Badge
@@ -155,6 +156,7 @@ const BadgesPage: FC = () => {
 
             <ComponentLayout
                 title="Notification badge"
+                withPub
                 element={<NotificationBadge number={2} />}
                 component={NotificationBadge}
             />

diff --git a/pages/components/blog/index.tsx b/pages/components/blog/index.tsx
@@ -60,6 +60,7 @@ const BlogPage = () => {
             <ComponentLayout
                 vertical={false}
                 showSwitchMode={true}
+                withPub
                 title="With author"
                 element={
                     <BlogCard