feat: add ctaPosition to CallToActionSection

acid-info · Mar 21, 2024 · 9156dd5 · 9156dd5
1 parent 004c173
commit 9156dd5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
@@ -185,6 +185,7 @@ import * as challengesData from '/generated/challenges.json'
     description="Nimbus is trusted by Etherem validators diverse in both size and operating requirements. But don't just take our word for it."
     href="https://nimbus.team"
     label="Get Nimbus"
+    ctaPosition="top"
     target="_blank"
   />
   <Box top={{ xs: 100, lg: 100 }}>

diff --git a/...s-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/...s-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
@@ -43,6 +43,18 @@
   }
 }
 
+.mdx-cta-section__header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+
+  button {
+    padding: 6px 12px !important;
+    font-size: 12px !important;
+    line-height: 16px !important;
+  }
+}
+
 .mdx-cta-section--no-border {
   border: none !important;
 

diff --git a/...os-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/...os-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
@@ -48,6 +48,10 @@ export type CallToActionSectionProps = Omit<
    * The variant of the button
    */
   variant?: ButtonProps['variant']
+  /**
+   * The position of the call-to-action button
+   */
+  ctaPosition?: 'top' | 'bottom'
   /**
    * A list of items to display in the section
    */
@@ -132,6 +136,7 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
   className,
   children,
   variant = 'outlined',
+  ctaPosition = 'bottom',
   ...props
 }) => {
   const withDescription = !!description
@@ -165,13 +170,25 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
           align !== 'unset' && `mdx-cta-section--align-${align}`,
         )}
       >
-        <Typography component="h2" className="mdx-cta-section__title">
-          {title}
-        </Typography>
+        <div className="mdx-cta-section__header">
+          <Typography component="h2" className="mdx-cta-section__title">
+            {title}
+          </Typography>
+          {href && ctaPosition === 'top' && (
+            <CallToActionButton
+              target={target}
+              href={href}
+              className="mdx-cta-section__link"
+              variant={variant}
+            >
+              {label}
+            </CallToActionButton>
+          )}
+        </div>
         <Typography component="h3" className="mdx-cta-section__description">
           {description}
         </Typography>
-        {href && (
+        {href && ctaPosition === 'bottom' && (
           <CallToActionButton
             target={target}
             href={href}