dynamic listing of top 6 or less upto 2 articles

src/blog/components/ArticleCards/ArticleCardsGrid.tsx

@@ -1,20 +1,23 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-
+import React from 'react';
+import { Grid, Box } from '@mui/material';
+import ArticleCardSize6 from './ArticleCardSize6';
+import ArticleCardSize4 from './ArticleCardSize4';
+import ArticleCardSize2 from './ArticleCardSize2';
 import { ArticleModel } from "../../types/models";
-import ArticleCardSize6 from "../ArticleCards/ArticleCardSize6";
-import ArticleCardSize4 from "../ArticleCards/ArticleCardSize4";
-import ArticleCardSize2 from "../ArticleCards/ArticleCardSize2";
-
+import { ArticleGridProps } from "../../types/props";
 
 export default function ArticleCardsGrid({
   articles,
   onSelectArticle,
-}: {
-  articles: any[];
-  onSelectArticle: (index: number) => void;
-}) {
+  xs = 12,
+  md6 = 6,
+  md4 = 4,
+  nested = 2,
+}: ArticleGridProps ) {
+
+  const visibleArticles = articles.slice(0, 6)
+  const count = visibleArticles.length;
+
   const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
     null,
   );
@@ -27,70 +30,109 @@ export default function ArticleCardsGrid({
     setFocusedCardIndex(null);
   };
 
+  const renderCard = (article: ArticleModel, index: number, type: '6' | '4' | '2' = '6') => {
+    const CardComponent =
+      type === '6' ? ArticleCardSize6 :
+      type === '4' ? ArticleCardSize4 :
+      ArticleCardSize2;
+
+    return (
+      <CardComponent
+        key={index}
+        article={article}
+        index={index}
+        focusedCardIndex={focusedCardIndex}
+        onSelectArticle={onSelectArticle}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+    );
+  };
+
   return (
     <Grid container spacing={2} columns={12}>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <ArticleCardSize6
-          article={articles[0]}
-          index={0}
-          focusedCardIndex={focusedCardIndex}
-          onSelectArticle={onSelectArticle}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <ArticleCardSize6
-          article={articles[1]}
-          index={1}
-          focusedCardIndex={focusedCardIndex}
-          onSelectArticle={onSelectArticle}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-      </Grid>
-      <Grid size={{ xs: 12, md: 4 }}>
-        <ArticleCardSize4
-          article={articles[2]}
-          index={2}
-          focusedCardIndex={focusedCardIndex}
-          onSelectArticle={onSelectArticle}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-      </Grid>
-      <Grid size={{ xs: 12, md: 4 }}>
-        <Box
-          sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}
-        >
-          <ArticleCardSize2
-            article={articles[3]}
-            index={3}
-            focusedCardIndex={focusedCardIndex}
-            onSelectArticle={onSelectArticle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          <ArticleCardSize2
-            article={articles[4]}
-            index={4}
-            focusedCardIndex={focusedCardIndex}
-            onSelectArticle={onSelectArticle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </Box>
-      </Grid>
-      <Grid size={{ xs: 12, md: 4 }}>
-        <ArticleCardSize4
-          article={articles[5]}
-          index={5}
-          focusedCardIndex={focusedCardIndex}
-          onSelectArticle={onSelectArticle}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-      </Grid>
+      {/* ---- 2 articles: 6 | 6 ---- */}
+      {count === 2 && (
+        <>
+          {visibleArticles.map((a, i) => (
+            <Grid key={i} size={{ xs, md: md6 }}>
+              {renderCard(a, i, '6')}
+            </Grid>
+          ))}
+        </>
+      )}
+
+      {/* ---- 3 articles: 4 | 4 | 4 ---- */}
+      {count === 3 && (
+        <>
+          {visibleArticles.map((a, i) => (
+            <Grid key={i} size={{ xs, md: md4 }}>
+              {renderCard(a, i, '4')}
+            </Grid>
+          ))}
+        </>
+      )}
+
+      {/* ---- 4 articles: (6|6) + (6|6) ---- */}
+      {count === 4 && (
+        <>
+          {visibleArticles.map((a, i) => (
+            <Grid key={i} size={{ xs, md: md6 }}>
+              {renderCard(a, i, '6')}
+            </Grid>
+          ))}
+        </>
+      )}
+
+      {/* ---- 5 articles: (6|6) + (4|4|4) ---- */}
+      {count === 5 && (
+        <>
+          {/* Row 1: 2 x size6 */}
+          {visibleArticles.slice(0, 2).map((a, i) => (
+            <Grid key={i} size={{ xs, md: md6 }}>
+              {renderCard(a, i, '6')}
+            </Grid>
+          ))}
+
+          {/* Row 2: 3 x size4 */}
+          {visibleArticles.slice(2).map((a, i) => (
+            <Grid key={i + 2} size={{ xs, md: md4 }}>
+              {renderCard(a, i + 2, '4')}
+            </Grid>
+          ))}
+        </>
+      )}
+
+      {/* ---- 6 articles: (6|6) + (4|2x2|4) ---- */}
+      {count === 6 && (
+        <>
+          {/* Top row: 2 x size6 */}
+          {visibleArticles.slice(0, 2).map((a, i) => (
+            <Grid key={i} size={{ xs, md: md6 }}>
+              {renderCard(a, i, '6')}
+            </Grid>
+          ))}
+
+          {/* Bottom row: 4 + 2x2 + 4 */}
+          <Grid size={{ xs, md: md4 }}>
+            {renderCard(visibleArticles[2], 2, '4')}
+          </Grid>
+
+          <Grid size={{ xs, md: md4 }}>
+            <Box
+              sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}
+            >
+              {visibleArticles.slice(3, 3 + nested).map((a, i) =>
+                renderCard(a, i + 3, '2')
+              )}
+            </Box>
+          </Grid>
+
+          <Grid size={{ xs, md: md4 }}>
+            {renderCard(visibleArticles[5], 5, '4')}
+          </Grid>
+        </>
+      )}
     </Grid>
   );
 }

src/blog/types/props.ts

@@ -21,3 +21,12 @@ export interface ArticleCardProps {
   onFocus: (index: number) => void;
   onBlur: () => void;
 }
+
+export interface ArticleGridProps {
+  articles: ArticleModel[];
+  onSelectArticle: (index: number) => void;
+  xs?: number;  // default 12 for mobile full-width
+  md6?: number; // default 6 (half-width)
+  md4?: number; // default 4 (third-width)
+  nested?: 1 | 2; // number of stacked cards in a nested column
+}