From 71ce77980dd467dfdbce9296d271997ce833170a Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Fri, 7 Nov 2025 20:50:30 +0530 Subject: [PATCH] enabled Latest.tsx --- src/blog/Blog.tsx | 5 +- src/blog/components/Latest.tsx | 114 ++++++--------------------------- 2 files changed, 23 insertions(+), 96 deletions(-) diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx index a1d33ba..087b2a1 100644 --- a/src/blog/Blog.tsx +++ b/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 ? ( - + <> + + {/* show 3 most recent */} + ) : (
)} diff --git a/src/blog/components/Latest.tsx b/src/blog/components/Latest.tsx index 9af951a..664ca6e 100644 --- a/src/blog/components/Latest.tsx +++ b/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 }[] }) { ))} - {authors.map((author) => author.name).join(', ')} + {authors.map((a) => a.name).join(', ')} - July 14, 2021 + Recently Updated ); } -export default function Latest() { - const [focusedCardIndex, setFocusedCardIndex] = React.useState( - null, - ); +// ---- Latest component ---- // +interface LatestProps { + articles: Article[]; + onSelectArticle?: (index: number) => void; +} - const handleFocus = (index: number) => { - setFocusedCardIndex(index); - }; +export default function Latest({ articles, onSelectArticle }: LatestProps) { + const [focusedCardIndex, setFocusedCardIndex] = React.useState(null); - const handleBlur = () => { - setFocusedCardIndex(null); - }; + const handleFocus = (index: number) => setFocusedCardIndex(index); + const handleBlur = () => setFocusedCardIndex(null); + + // limit to 4-6 items for visual balance + const displayedArticles = articles.slice(0, 6); return (
@@ -187,7 +109,7 @@ export default function Latest() { Latest - {articleInfo.map((article, index) => ( + {displayedArticles.map((article, index) => ( {article.tag} + handleFocus(index)} onBlur={handleBlur} - tabIndex={0} + onClick={() => onSelectArticle?.(index)} className={focusedCardIndex === index ? 'Mui-focused' : ''} > {article.title}