From 5464397f87adfdc7e99e687da4703939572d672c Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Tue, 10 Oct 2023 17:52:39 +0330
Subject: [PATCH] fix: restore Grid's actions section

---
 .../docusaurus-playground/src/pages/index.mdx | 14 +++++++-
 .../src/client/components/mdx/Grid/Grid.tsx   | 35 +++++++++++++------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index 1a15b06..a3b3b24 100644
--- 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
index 74a2604..e2fa3ad 100644
--- 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