diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx index 1d334dd..7bd502b 100644 --- a/src/blog/Blog.tsx +++ b/src/blog/Blog.tsx @@ -1,15 +1,16 @@ import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; +import Box from '@mui/material/Box'; import AppTheme from '../shared-theme/AppTheme'; import MainContent from './components/MainContent'; import Article from './components/Article'; import Latest from './components/Latest'; import Footer from './components/Footer'; -import { useArticles } from './providers/Article'; // ✅ custom hook for global articles +import { useArticles } from './providers/Article'; export default function Blog(props: { disableCustomTheme?: boolean }) { - const { articles, loading, error } = useArticles(); // ✅ Hook must be inside component + const { articles, loading, error } = useArticles(); const [selectedArticle, setSelectedArticle] = React.useState(null); const handleSelectArticle = (index: number) => { @@ -26,7 +27,12 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { Loading articles... @@ -41,7 +47,12 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { Failed to load articles: {error} @@ -53,28 +64,61 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { - - {selectedArticle === null ? ( - <> - - { - // Optional: fetch more from API (if you want true pagination) - // await fetchMoreArticles(offset, limit); - }} - /> - - ) : ( -
+ + {selectedArticle === null ? ( + <> + + { + // Optional pagination call + }} + /> + + ) : ( +
+ )} + + + {selectedArticle === null && ( + +