apps/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved out ArticleCards grid

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2025-11-12 04:50:47 +05:30
parent 7fece6f8f9
commit 08c20c2613
2 changed files with 101 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/blog/components/ArticleCards/ArticleCards.tsx Normal file
View File

@@ -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>
);
}

80
src/blog/components/MainContent.tsx
View File

@@ -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 ArticleCardSize4 from "./ArticleCards/ArticleCardSize4";
import ArticleCardSize2 from "./ArticleCards/ArticleCardSize2";
import ArticleCards from "./ArticleCards/ArticleCards";
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}>
<Grid size={{ xs: 12, md: 6 }}>
<ArticleCardSize6
article={visibleArticles[0]}
index={0}
focusedCardIndex={focusedCardIndex}
<ArticleCards
articles={visibleArticles}
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>
);
}