moved out ArticleCards grid

src/blog/components/ArticleCards/ArticleCards.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+
+import { ArticleModel } from "../../types/models";
+import ArticleCardSize6 from "../ArticleCards/ArticleCardSize6";
+import ArticleCardSize4 from "../ArticleCards/ArticleCardSize4";
+import ArticleCardSize2 from "../ArticleCards/ArticleCardSize2";
+
+
+export default function ArticleCards({
+  articles,
+  onSelectArticle,
+}: {
+  articles: any[];
+  onSelectArticle: (index: number) => void;
+}) {
+  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
+    null,
+  );
+
+  const handleFocus = (index: number) => {
+    setFocusedCardIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedCardIndex(null);
+  };
+
+  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>
+      </Grid>
+  );
+}

src/blog/components/MainContent.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
-import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import FormControl from '@mui/material/FormControl';
@@ -11,9 +10,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
 import { ArticleModel } from "../types/models";
-import ArticleCardSize6 from "./ArticleCards/ArticleCardSize6";
+import ArticleCards from "./ArticleCards/ArticleCards";
-import ArticleCardSize4 from "./ArticleCards/ArticleCardSize4";
-import ArticleCardSize2 from "./ArticleCards/ArticleCardSize2";
 
 export function Search() {
   return (
@@ -43,9 +40,6 @@ export default function MainContent({
   articles: any[];
   onSelectArticle: (index: number) => void;
 }) {
-  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
-    null,
-  );
 
   const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
   const [activeTag, setActiveTag] = React.useState<string | null>(null);
@@ -74,14 +68,6 @@ export default function MainContent({
     setActiveTag(tag);
   };
 
-  const handleFocus = (index: number) => {
-    setFocusedCardIndex(index);
-  };
-
-  const handleBlur = () => {
-    setFocusedCardIndex(null);
-  };
-
   const handleTagClick = (tag: string) => {
     setActiveTag((prev) => (prev === tag ? 'all' : tag));
     filterArticlesByTag(tag)
@@ -198,70 +184,10 @@ export default function MainContent({
           </IconButton>
         </Box>
       </Box>
-      <Grid container spacing={2} columns={12}>
+      <ArticleCards
-        <Grid size={{ xs: 12, md: 6 }}>
+        articles={visibleArticles}
-          <ArticleCardSize6
+        onSelectArticle={onSelectArticle}
-            article={visibleArticles[0]}
+      />
-            index={0}
-            focusedCardIndex={focusedCardIndex}
-            onSelectArticle={onSelectArticle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <ArticleCardSize6
-            article={visibleArticles[1]}
-            index={1}
-            focusedCardIndex={focusedCardIndex}
-            onSelectArticle={onSelectArticle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </Grid>
-        <Grid size={{ xs: 12, md: 4 }}>
-          <ArticleCardSize4
-            article={visibleArticles[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={visibleArticles[3]}
-              index={3}
-              focusedCardIndex={focusedCardIndex}
-              onSelectArticle={onSelectArticle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-            <ArticleCardSize2
-              article={visibleArticles[4]}
-              index={4}
-              focusedCardIndex={focusedCardIndex}
-              onSelectArticle={onSelectArticle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-          </Box>
-        </Grid>
-        <Grid size={{ xs: 12, md: 4 }}>
-          <ArticleCardSize4
-            article={visibleArticles[5]}
-            index={5}
-            focusedCardIndex={focusedCardIndex}
-            onSelectArticle={onSelectArticle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </Grid>
-      </Grid>
     </Box>
   );
 }