enabled Latest.tsx

src/blog/Blog.tsx

@@ -59,7 +59,10 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
       >
         {selectedArticle === null ? (
-          <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
+          <>
+            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
+            <Latest articles={articles.slice(0, 3)} /> {/* show 3 most recent */}
+          </>
         ) : (
           <Article article={articles[selectedArticle]} onBack={handleBack} />
         )}

src/blog/components/Latest.tsx

@@ -7,88 +7,8 @@ import Pagination from '@mui/material/Pagination';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
+import type { Article } from '../providers/Article'; // ✅ import type for correctness
 
-const articleInfo = [
-  {
-    tag: 'Engineering',
-    title: 'The future of AI in software engineering',
-    description:
-      'Artificial intelligence is revolutionizing software engineering. Explore how AI-driven tools are enhancing development processes and improving software quality.',
-    authors: [
-      { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
-      { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
-    ],
-  },
-  {
-    tag: 'Product',
-    title: 'Driving growth with user-centric product design',
-    description:
-      'Our user-centric product design approach is driving significant growth. Learn about the strategies we employ to create products that resonate with users.',
-    authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }],
-  },
-  {
-    tag: 'Design',
-    title: 'Embracing minimalism in modern design',
-    description:
-      'Minimalism is a key trend in modern design. Discover how our design team incorporates minimalist principles to create clean and impactful user experiences.',
-    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
-  },
-  {
-    tag: 'Company',
-    title: 'Cultivating a culture of innovation',
-    description:
-      'Innovation is at the heart of our company culture. Learn about the initiatives we have in place to foster creativity and drive groundbreaking solutions.',
-    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
-  },
-  {
-    tag: 'Engineering',
-    title: 'Advancing cybersecurity with next-gen solutions',
-    description:
-      'Our next-generation cybersecurity solutions are setting new standards in the industry. Discover how we protect our clients from evolving cyber threats.',
-    authors: [
-      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
-      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
-    ],
-  },
-  {
-    tag: 'Product',
-    title: 'Enhancing customer experience through innovation',
-    description:
-      'Our innovative approaches are enhancing customer experience. Learn about the new features and improvements that are delighting our users.',
-    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
-  },
-  {
-    tag: 'Engineering',
-    title: 'Pioneering sustainable engineering solutions',
-    description:
-      "Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
-    authors: [
-      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
-      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
-    ],
-  },
-  {
-    tag: 'Product',
-    title: 'Maximizing efficiency with our latest product updates',
-    description:
-      'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
-    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
-  },
-  {
-    tag: 'Design',
-    title: 'Designing for the future: trends and insights',
-    description:
-      'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
-    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
-  },
-  {
-    tag: 'Company',
-    title: "Our company's journey: milestones and achievements",
-    description:
-      "Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
-    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
-  },
-];
 
 const StyledTypography = styled(Typography)({
   display: '-webkit-box',
@@ -160,26 +80,28 @@ function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
           ))}
         </AvatarGroup>
         <Typography variant="caption">
-          {authors.map((author) => author.name).join(', ')}
+          {authors.map((a) => a.name).join(', ')}
         </Typography>
       </Box>
-      <Typography variant="caption">July 14, 2021</Typography>
+      <Typography variant="caption">Recently Updated</Typography>
     </Box>
   );
 }
 
-export default function Latest() {
+// ---- Latest component ---- //
-  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
+interface LatestProps {
-    null,
+  articles: Article[];
-  );
+  onSelectArticle?: (index: number) => void;
+}
 
-  const handleFocus = (index: number) => {
+export default function Latest({ articles, onSelectArticle }: LatestProps) {
-    setFocusedCardIndex(index);
+  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(null);
-  };
 
-  const handleBlur = () => {
+  const handleFocus = (index: number) => setFocusedCardIndex(index);
-    setFocusedCardIndex(null);
+  const handleBlur = () => setFocusedCardIndex(null);
-  };
+
+  // limit to 4-6 items for visual balance
+  const displayedArticles = articles.slice(0, 6);
 
   return (
     <div>
@@ -187,7 +109,7 @@ export default function Latest() {
         Latest
       </Typography>
       <Grid container spacing={8} columns={12} sx={{ my: 4 }}>
-        {articleInfo.map((article, index) => (
+        {displayedArticles.map((article, index) => (
           <Grid key={index} size={{ xs: 12, sm: 6 }}>
             <Box
               sx={{
@@ -201,12 +123,14 @@ export default function Latest() {
               <Typography gutterBottom variant="caption" component="div">
                 {article.tag}
               </Typography>
+
               <TitleTypography
                 gutterBottom
                 variant="h6"
+                tabIndex={0}
                 onFocus={() => handleFocus(index)}
                 onBlur={handleBlur}
-                tabIndex={0}
+                onClick={() => onSelectArticle?.(index)}
                 className={focusedCardIndex === index ? 'Mui-focused' : ''}
               >
                 {article.title}