Add Comment Banner

src/components/main/HomePage.tsx

@@ -1,5 +1,6 @@
 import { UpOutlined } from '@ant-design/icons'
 import { Affix, BackTop, Button, Tabs, Tooltip } from 'antd'
+import clsx from 'clsx'
 import { NextPage } from 'next'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
@@ -18,6 +19,7 @@ import { CreatorDashboardHomeVariant } from '../creators/CreatorDashboardSidebar
 import MobileActiveStakingSection from '../creators/MobileActiveStakingSection'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { CreatorsSpaces } from '../spaces/LatestSpacesPage'
+import CommentBanner from '../utils/banners/CommentBanner'
 import Section from '../utils/Section'
 import style from './HomePage.module.sass'
 import { dateFilterOpt, Filters, PostFilterView, SpaceFilterView } from './HomePageFilters'
@@ -187,6 +189,9 @@ const TabsHomePage = ({
   return (
     <>
       <MobileActiveStakingSection />
+      <div className={clsx(isMobile ? 'mt-3' : '')}>
+        <CommentBanner />
+      </div>
       <span>
         {!isMobile && <AffixTabs tabKey={tab} setKey={onChangeKey} visible={hidden} {...props} />}
       </span>

src/components/utils/banners/CommentBanner.tsx

@@ -0,0 +1,16 @@
+import MultiBanner from './MultiBanner'
+
+const bannersKind = ['']
+
+const BANNER_STORAGE_KEY = 'df.comments'
+
+const CommentBanner = () => (
+  <MultiBanner
+    uid={BANNER_STORAGE_KEY}
+    kinds={bannersKind}
+    withCloseButtonBackground
+    buildUrl={({ isMobile }) => `/images/banners/comment${isMobile ? '-mobile' : '-desktop'}.png`}
+  />
+)
+
+export default CommentBanner

src/components/utils/banners/MultiBanner/index.module.sass

@@ -18,13 +18,18 @@
 .DfCloseButton
   color: #fff
   cursor: pointer
-  font-size: 1.25rem
   padding-right: 0
   float: right
   position: absolute
   top: $space_small
   right: $space_small
 
+  &.DfCloseButtonBg
+    padding: $space_mini
+    border-radius: $border_radius_normal
+    background: rgba(0, 0, 0, .3)
+    backdrop-filter: blur(4px) saturate(180%)
+
   &:hover
     color: $color_link_hover
 

src/components/utils/banners/MultiBanner/index.tsx

@@ -1,4 +1,5 @@
 import { CloseOutlined } from '@ant-design/icons'
+import clsx from 'clsx'
 import Link from 'next/link'
 import React, { useState } from 'react'
 import { useResponsiveSize } from 'src/components/responsive'
@@ -15,10 +16,17 @@ type MultiBannerProps = {
   uid: string
   kinds: string[]
   buildUrl: (props: BuildUrlFnProps) => string
-  href: string
+  href?: string
+  withCloseButtonBackground?: boolean
 }
 
-export const MultiBanner = ({ uid, kinds, buildUrl, href }: MultiBannerProps) => {
+export const MultiBanner = ({
+  uid,
+  kinds,
+  buildUrl,
+  href,
+  withCloseButtonBackground,
+}: MultiBannerProps) => {
   const { isMobile } = useResponsiveSize()
 
   const bannerFromStorage = store.get(uid)
@@ -40,15 +48,25 @@ export const MultiBanner = ({ uid, kinds, buildUrl, href }: MultiBannerProps) =>
     store.set(uid, false)
   }
 
-  const closeButton = <CloseOutlined className={styles.DfCloseButton} onClick={closeBanner} />
+  const closeButton = (
+    <CloseOutlined
+      className={clsx(styles.DfCloseButton, withCloseButtonBackground && styles.DfCloseButtonBg)}
+      onClick={closeBanner}
+    />
+  )
+  const content = (
+    <div className={styles.Banner}>
+      <img src={backgroundImage} className={styles.BannerImg} alt='Banner image' />
+      {closeButton}
+    </div>
+  )
+
+  if (!href) return content
 
   return (
     <Link href={href}>
       <a target='_blank' rel='noreferrer'>
-        <div className={styles.Banner}>
-          <img src={backgroundImage} className={styles.BannerImg} alt='Banner image' />
-          {closeButton}
-        </div>
+        {content}
       </a>
     </Link>
   )