fix: restore Grid's actions section

acid-info · Oct 10, 2023 · 5464397 · 5464397
1 parent 7f0bbaa
commit 5464397
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
@@ -181,7 +181,19 @@ import {
     description="Codex is currently in its first proof-of-concept iteration and aims to release its beta version, Katana, before the end of Q4 2023."
     bottom={{ xs: '4rem', lg: '7.25rem' }}
   />
-  <Grid xs={{ cols: 6, wrap: false, gap: '0 1rem' }}>
+  <Grid
+    xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
+    actions={
+      <CallToActionButton
+        style={{ marginTop: 0 }}
+        size="small"
+        variant="outlined"
+        href="/about"
+      >
+        Read more
+      </CallToActionButton>
+    }
+  >
     <Grid.Item>
       <TimelineItem
         period="2021"

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
@@ -12,9 +12,12 @@ import React, { useRef } from 'react'
 import { lsdUtils } from '../../../lib/lsd.utils'
 import { GridItem } from './GridItem'
 
-export type GridProps = React.ComponentProps<typeof GridRoot> & {}
+export type GridProps = React.ComponentProps<typeof GridRoot> & {
+  actions?: React.ReactNode
+}
 
 export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
+  actions,
   children,
   ...props
 }) => {
@@ -35,15 +38,18 @@ export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
 
   return (
     <GridRoot {...props} className={clsx(props.className, 'mdx-grid')}>
-      <div className="mdx-grid__scroll">
-        <IconButtonGroup size="small" color="primary">
-          <IconButton size="small" onClick={scroll.bind(null, -1)}>
-            <NavigateBeforeIcon />
-          </IconButton>
-          <IconButton size="small" onClick={scroll.bind(null, 1)}>
-            <NavigateNextIcon />
-          </IconButton>
-        </IconButtonGroup>
+      <div className="mdx-grid__actions">
+        {actions}
+        <div className="mdx-grid__scroll">
+          <IconButtonGroup size="small" color="primary">
+            <IconButton size="small" onClick={scroll.bind(null, -1)}>
+              <NavigateBeforeIcon />
+            </IconButton>
+            <IconButton size="small" onClick={scroll.bind(null, 1)}>
+              <NavigateNextIcon />
+            </IconButton>
+          </IconButtonGroup>
+        </div>
       </div>
       <div ref={ref} className={clsx('mdx-grid__content', 'hidden-scrollbar')}>
         {children}
@@ -70,7 +76,6 @@ const GridRoot = styled.div<{
   width: 100%;
 
   .mdx-grid__scroll {
-    margin-bottom: 2rem;
     display: flex;
     flex-direction: row;
     gap: 0 1rem;
@@ -83,6 +88,14 @@ const GridRoot = styled.div<{
     overflow: hidden;
   }
 
+  .mdx-grid__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
   ${(props) =>
     THEME_BREAKPOINTS.map((key) => {
       if (!props[key]) return null