cleanup

src/blog/components/MainContent.tsx

@@ -37,12 +37,12 @@ export default function MainContent({
   articles,
   onSelectArticle,
 }: {
-  articles: any[];
+  articles: ArticleModel[];
   onSelectArticle: (index: number) => void;
 }) {
 
   const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
-  const [activeTag, setActiveTag] = React.useState<string | null>(null);
+  const [activeTag, setActiveTag] = React.useState<string>('all');
 
   const filterArticlesByTag = (tag: string) => {
     if (tag === 'all') {
@@ -75,11 +75,9 @@ export default function MainContent({
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-      <div>
       <Typography variant="h1" gutterBottom>
         Blog
       </Typography>
-      </div>
       <Box
         sx={{
           display: { xs: 'flex', sm: 'none' },
@@ -113,61 +111,21 @@ export default function MainContent({
             overflow: 'auto',
           }}
         >
+          {['all', 'infra', 'code', 'media', 'monitoring'].map((tag) => (
             <Chip
-            onClick={() => handleTagClick('all')}
+              key={tag}
+              onClick={() => handleTagClick(tag)}
               size="medium"
-            label="All categories"
+              label={tag === 'all' ? 'All categories' : tag.charAt(0).toUpperCase() + tag.slice(1)}
-            color={activeTag === 'all' ? 'primary' : 'default'}
+              color={activeTag === tag ? 'primary' : 'default'}
-            variant={activeTag === 'all' ? 'filled' : 'outlined'}
+              variant={activeTag === tag ? 'filled' : 'outlined'}
               sx={{
                 borderRadius: '8px',
-              fontWeight: activeTag === 'all' ? 600 : 400,
+                fontWeight: activeTag === tag ? 600 : 400,
-            }}
+                textTransform: 'capitalize',
-          />
-          <Chip
-            onClick={() => handleTagClick('infra')}
-            size="medium"
-            label="Infra"
-            color={activeTag === 'infra' ? 'primary' : 'default'}
-            variant={activeTag === 'infra' ? 'filled' : 'outlined'}
-            sx={{
-              borderRadius: '8px',
-              fontWeight: activeTag === 'infra' ? 600 : 400,
-            }}
-          />
-          <Chip
-            onClick={() => handleTagClick('code')}
-            size="medium"
-            label="Code"
-            color={activeTag === 'code' ? 'primary' : 'default'}
-            variant={activeTag === 'code' ? 'filled' : 'outlined'}
-            sx={{
-              borderRadius: '8px',
-              fontWeight: activeTag === 'code' ? 600 : 400,
-            }}
-          />
-          <Chip
-            onClick={() => handleTagClick('media')}
-            size="medium"
-            label="Media"
-            color={activeTag === 'media' ? 'primary' : 'default'}
-            variant={activeTag === 'media' ? 'filled' : 'outlined'}
-            sx={{
-              borderRadius: '8px',
-              fontWeight: activeTag === 'media' ? 600 : 400,
-            }}
-          />
-          <Chip
-            onClick={() => handleTagClick('monitoring')}
-            size="medium"
-            label="Monitoring"
-            color={activeTag === 'monitoring' ? 'primary' : 'default'}
-            variant={activeTag === 'monitoring' ? 'filled' : 'outlined'}
-            sx={{
-              borderRadius: '8px',
-              fontWeight: activeTag === 'all' ? 600 : 400,
               }}
             />
+          ))}
         </Box>
         <Box
           sx={{