From ba35bf19c3c39d8b65faffd8be8fc35cc3b529d1 Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@users.noreply.github.com>
Date: Fri, 15 Dec 2023 15:07:43 -0500
Subject: [PATCH] fix(nx-dev): dynamic classes not allowed (#20800)

---
 docs/shared/getting-started/intro.md          |  4 +-
 .../src/lib/tags/cards.component.tsx          | 52 +++++++++++++++++--
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md
index 078111dbd4..46e2670227 100644
--- a/docs/shared/getting-started/intro.md
+++ b/docs/shared/getting-started/intro.md
@@ -21,7 +21,7 @@ npx create-nx-workspace@latest
 
 ## Learn Nx
 
-{% cards cols="2" lgCols="6" mdCols="4" smCols="2" %}
+{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}
 
 {% link-card title="Nx in 10 minutes!" type="video" url="https://youtu.be/-_4WMl-Fn0w" icon="nx" /%}
 
@@ -33,7 +33,7 @@ npx create-nx-workspace@latest
 
 {% /cards %}
 
-{% cards cols="2" lgCols="6" mdCols="5" smCols="2" %}
+{% cards cols="2" lgCols="5" mdCols="5" smCols="2" %}
 
 {% link-card title="Package Based Monorepos" type="tutorial" url="/getting-started/tutorials/package-based-repo-tutorial" icon="jsMono" /%}
 
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index 8efef4e869..c448856848 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -9,6 +9,47 @@ import { frameworkIcons } from '../icons';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { ReactNode } from 'react';
 
+const colsClasses: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  7: 'grid-cols-7',
+  8: 'grid-cols-8',
+};
+const smColsClasses: Record<number, string> = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5',
+  6: 'sm:grid-cols-6',
+  7: 'sm:grid-cols-7',
+  8: 'sm:grid-cols-8',
+};
+const mdColsClasses: Record<number, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  7: 'md:grid-cols-7',
+  8: 'md:grid-cols-8',
+};
+const lgColsClasses: Record<number, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+  7: 'lg:grid-cols-7',
+  8: 'lg:grid-cols-8',
+};
+
 export function Cards({
   cols = 2,
   smCols = 3,
@@ -31,10 +72,13 @@ export function Cards({
   // <div className="mt-8 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 gap-4">
   return (
     <div
-      className={`mt-8 grid gap-4 ${calcCols(cols, '')} ${calcCols(
-        smCols,
-        'sm'
-      )} ${calcCols(mdCols, 'md')} ${calcCols(lgCols, 'lg')}`}
+      className={cx(
+        'mt-8 grid gap-4',
+        colsClasses[cols] || '',
+        smColsClasses[smCols] || '',
+        mdColsClasses[mdCols] || '',
+        lgColsClasses[lgCols] || ''
+      )}
     >
       {children}
       {moreLink && (