From a5c4188f67e1fa8ac947be4f6cc7fd1a9ea313c9 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 10 Jul 2023 06:32:37 +0330
Subject: [PATCH] feat: support variable number of columns for the showcase
 component

---
 .../src/client/components/mdx/Showcase/Showcase.scss   |  2 +-
 .../src/client/components/mdx/Showcase/Showcase.tsx    | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
index 681d4de..2f88216 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
@@ -5,7 +5,7 @@
   width: 100%;
   overflow: hidden;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(var(--columns), 1fr);
   gap: 1rem;
 }
 
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
index d4bf4b9..5c9f5e4 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
@@ -2,6 +2,7 @@ import { Typography } from '@acid-info/lsd-react'
 import ThemedImage from '@theme/ThemedImage'
 import clsx from 'clsx'
 import React from 'react'
+import { makeStyle } from '../../../lib/makeStyle'
 import './Showcase.scss'
 
 export type ShowcaseItem = {
@@ -16,16 +17,23 @@ export type ShowcaseProps = Omit<
   'title'
 > & {
   items: ShowcaseItem[]
+  columns?: number
 }
 
 export const Showcase: React.FC<ShowcaseProps> = ({
   items = [],
+  columns = 4,
+  style = {},
   className,
   children,
   ...props
 }) => {
   return (
-    <div className={clsx(className, 'mdx-showcase')} {...props}>
+    <div
+      className={clsx(className, 'mdx-showcase')}
+      style={makeStyle({ ...style }, { columns })}
+      {...props}
+    >
       {items.map((item, index) => {
         return (
           <div key={index} className="mdx-showcase__item">