From 38fde1e35d58e652706117276fa23f951562b349 Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Tue, 28 Oct 2025 22:44:43 +0530 Subject: [PATCH] using ArticleProvider (with default values for now) --- src/blog/Blog.tsx | 105 +++++++-------------- src/blog/components/MainContent.tsx | 121 ++++++++---------------- src/blog/providers/Article.tsx | 138 ++++++++++++++++++++++++++++ src/main.jsx | 5 +- 4 files changed, 212 insertions(+), 157 deletions(-) create mode 100644 src/blog/providers/Article.tsx diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx index c1cdf92..a1d33ba 100644 --- a/src/blog/Blog.tsx +++ b/src/blog/Blog.tsx @@ -6,77 +6,10 @@ import MainContent from './components/MainContent'; import Article from './components/Article'; import Latest from './components/Latest'; import Footer from './components/Footer'; - -const cardData = [ - { - img: 'https://picsum.photos/800/450?random=1', - tag: 'Engineering', - title: 'Revolutionizing software development with cutting-edge tools', - description: - 'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.', - content: - 'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.', - authors: [ - { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' }, - { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }, - ], - }, - { - img: 'https://picsum.photos/800/450?random=2', - tag: 'Product', - title: 'Innovative product features that drive success', - description: - 'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.', - content: - 'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.', - authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }], - }, - { - img: 'https://picsum.photos/800/450?random=3', - 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.', - content: - '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' }], - }, - { - img: 'https://picsum.photos/800/450?random=4', - 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.", - content: - "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' }], - }, - { - img: 'https://picsum.photos/800/450?random=45', - 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.", - content: - "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' }, - ], - }, - { - img: 'https://picsum.photos/800/450?random=6', - 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.', - content: - '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' }], - }, -]; +import { useArticles } from './providers/Article'; // ✅ custom hook for global articles export default function Blog(props: { disableCustomTheme?: boolean }) { + const { articles, loading, error } = useArticles(); // ✅ Hook must be inside component const [selectedArticle, setSelectedArticle] = React.useState(null); const handleSelectArticle = (index: number) => { @@ -86,6 +19,36 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { const handleBack = () => setSelectedArticle(null); + if (loading) { + return ( + + + + Loading articles... + + + ); + } + + if (error) { + return ( + + + + Failed to load articles: {error} + + + ); + } + return ( @@ -96,9 +59,9 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }} > {selectedArticle === null ? ( - + ) : ( -
+
)}