chore: add btn, content, image positioning

apps/web/src/components/AdPanel/Button.tsx

@@ -1,11 +1,20 @@
-import { Button, ButtonProps } from '@pancakeswap/uikit'
+import { Button, ButtonProps, OpenNewIcon } from '@pancakeswap/uikit'
 import { PropsWithChildren } from 'react'
 
-interface AdButtonProps extends ButtonProps, PropsWithChildren {}
+interface AdButtonProps extends ButtonProps, PropsWithChildren {
+  isExternal?: boolean
+}
 
-export const AdButton = ({ children }: AdButtonProps) => {
+export const AdButton = ({ children, isExternal, endIcon, ...props }: AdButtonProps) => {
   return (
-    <Button scale="sm" variant="subtle" padding="3px 4px 5px 4px" height="unset">
+    <Button
+      scale="sm"
+      variant="subtle"
+      width="fit-content"
+      padding="7px 8px 9px 8px"
+      endIcon={isExternal ? <OpenNewIcon color="invertedContrast" /> : endIcon}
+      {...props}
+    >
       {children}
     </Button>
   )

apps/web/src/components/AdPanel/Card.tsx

@@ -23,11 +23,21 @@ const Content = styled(Flex)`
 
 const PositionedImage = styled(Image)`
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: -2px;
+  right: -1px;
   z-index: 1;
 `
 
+const SliderContainer = styled(Box)`
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+
+  width: 148px;
+  height: 8px;
+  border: 1px solid gray;
+`
+
 interface AdCardProps {
   children?: React.ReactNode
   imageUrl?: string
@@ -39,6 +49,7 @@ export const AdCard = ({ children, imageUrl, alt }: AdCardProps) => {
   return (
     <BaseCard>
       <Content>{children}</Content>
+      <SliderContainer />
       <PositionedImage src={imageUrl} alt={alt || 'Ad'} width={207} height={188} />
     </BaseCard>
   )

apps/web/src/components/AdPanel/CardLayouts.tsx

@@ -1,6 +1,6 @@
 import { getPortalRoot, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { createPortal } from 'react-dom'
-import { TitleAd } from './Variations/TitleAd'
+import { TitleContentAd } from './Variations/TitleContentAd'
 
 /**
  * Renders floating Ad banners on desktop
@@ -9,13 +9,13 @@ export const DesktopCard = () => {
   const portalRoot = getPortalRoot()
   const { isDesktop } = useMatchBreakpoints()
 
-  return portalRoot && isDesktop ? createPortal(<TitleAd />, portalRoot) : null
+  return portalRoot && isDesktop ? createPortal(<TitleContentAd />, portalRoot) : null
 }
 
 /**
  * Renders Ad banners on mobile and tablet
  */
 export const MobileCard = () => {
   const { isDesktop } = useMatchBreakpoints()
-  return !isDesktop ? <TitleAd /> : null
+  return !isDesktop ? <TitleContentAd /> : null
 }

apps/web/src/components/AdPanel/Content.tsx

@@ -0,0 +1,12 @@
+import { Text, TextProps } from '@pancakeswap/uikit'
+import { PropsWithChildren } from 'react'
+
+interface ContentProps extends TextProps, PropsWithChildren {}
+
+export const Content = ({ children, ...props }: ContentProps) => {
+  return (
+    <Text fontSize="14px" mb="16px" bold {...props}>
+      {children}
+    </Text>
+  )
+}

apps/web/src/components/AdPanel/Title.tsx

@@ -2,10 +2,9 @@ import { Text, TextProps } from '@pancakeswap/uikit'
 import { PropsWithChildren } from 'react'
 
 interface TitleProps extends TextProps, PropsWithChildren {}
-
-export const Title = ({ children, ...props }: TitleProps) => {
+export const Title = ({ children }: TitleProps) => {
   return (
-    <Text fontSize="14px" mb="16px" bold {...props}>
+    <Text color="secondary" small bold>
       {children}
     </Text>
   )

apps/web/src/components/AdPanel/Variations/TitleContentAd.tsx

@@ -0,0 +1,15 @@
+import { AdButton } from '../Button'
+import { AdCard } from '../Card'
+import { Content } from '../Content'
+import { Title } from '../Title'
+
+export const TitleContentAd = () => {
+  return (
+    <AdCard imageUrl="/images/adpanel-test/bannerImg1.png">
+      <Title>Need Help?</Title>
+      <Content>Quick start now on How to Swap!</Content>
+
+      <AdButton isExternal>Quick start</AdButton>
+    </AdCard>
+  )
+}

apps/web/src/components/AdPanel/index.ts

@@ -1,13 +1,13 @@
 import { AdButton as Button } from './Button'
 import { AdCard as Card } from './Card'
 import { DesktopCard, MobileCard } from './CardLayouts'
-import { Title } from './Title'
+import { Content } from './Content'
 
 // TODO: Later move to widgets-internal with conventional exporting
 export const AdPanel = {
   DesktopCard,
   MobileCard,
   Card,
-  Title,
+  Content,
   Button,
 }