opening article page when clicking on card

2025-10-28 22:17:27 +05:30
parent e7d7ae0d15
commit 871ab7a0d0
3 changed files with 108 additions and 40 deletions
--- a/src/blog/Blog.tsx
+++ b/src/blog/Blog.tsx
@@ -7,7 +7,85 @@ 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' }],
+  },
+];
+
 export default function Blog(props: { disableCustomTheme?: boolean }) {
+  const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
+
+  const handleSelectArticle = (index: number) => {
+    setSelectedArticle(index);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleBack = () => setSelectedArticle(null);
+
  return (
    <AppTheme {...props}>
      <CssBaseline enableColorScheme />
@@ -17,9 +95,11 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
        component="main"
        sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
      >
-        <MainContent />
-        <Latest />
-        <Article />
+        {selectedArticle === null ? (
+          <MainContent onSelectArticle={handleSelectArticle} />
+        ) : (
+          <Article article={cardData[selectedArticle]} onBack={handleBack} />
+        )}
      </Container>
      <Footer />
    </AppTheme>
--- a/src/blog/components/Article.tsx
+++ b/src/blog/components/Article.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { marked } from 'marked';
-import { Box, Typography, Avatar, Divider, Chip } from '@mui/material';
+import { Box, Typography, Avatar, Divider, IconButton, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';

 const ArticleContainer = styled(Box)(({ theme }) => ({
  maxWidth: '800px',
@@ -20,45 +21,26 @@ const CoverImage = styled('img')({
  marginBottom: '24px',
 });

-export default function ArticlePage() {
-  const article = {
-    title: 'Revolutionizing Software Development with Cutting-Edge Tools',
-    subtitle:
-      'Discover how modern engineering teams are embracing automation and AI to deliver better software faster.',
-    author: {
-      name: 'Remy Sharp',
-      avatar: '/static/images/avatar/1.jpg',
-      date: 'October 28, 2025',
-    },
-    tag: 'Engineering',
-    cover: 'https://picsum.photos/1200/600?random=100',
-    content: `
-### The rise of smart tooling
-
-Software development has come a long way from manual compilation and testing. Modern tools leverage AI to detect code smells, optimize builds, and even generate tests.
-
-### Why it matters
-
-Engineering teams today are under constant pressure to deliver faster without compromising quality. Automation tools bridge this gap by handling repetitive, error-prone tasks — freeing developers to focus on creative problem-solving.
-
-### The human factor
-
-No tool replaces curiosity and critical thinking. The most successful teams balance automation with human oversight to ensure innovation doesn’t outpace understanding.
-
---
-
-*At the end of the day, great software is built by great people — empowered by great tools.*
-    `,
-  };
-
+export default function Article({
+  article,
+  onBack,
+}: {
+  article: any;
+  onBack: () => void;
+}) {
  return (
    <ArticleContainer>
+      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+        <ArrowBackRoundedIcon />
+      </IconButton>
+
      <Chip
        label={article.tag}
        variant="outlined"
        color="primary"
        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
      />
+
      <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
        {article.title}
      </Typography>
@@ -67,18 +49,18 @@ No tool replaces curiosity and critical thinking. The most successful teams bala
      </Typography>

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, mb: 1 }}>
-        <Avatar src={article.author.avatar} alt={article.author.name} />
+        <Avatar src={article.authors[0].avatar} alt={article.authors[0].name} />
        <Box>
-          <Typography variant="subtitle2">{article.author.name}</Typography>
+          <Typography variant="subtitle2">{article.authors[0].name}</Typography>
          <Typography variant="caption" color="text.secondary">
-            {article.author.date}
+            {article.authors[0].date}
          </Typography>
        </Box>
      </Box>

      <Divider sx={{ my: 3 }} />

-      <CoverImage src={article.cover} alt={article.title} />
+      <CoverImage src={article.img} alt={article.title} />

      <Box
        sx={{
--- a/src/blog/components/MainContent.tsx
+++ b/src/blog/components/MainContent.tsx
@@ -164,7 +164,7 @@ export function Search() {
  );
 }

-export default function MainContent() {
+export default function MainContent({ onSelectArticle }: { onSelectArticle: (index: number) => void }) {
  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
    null,
  );
@@ -279,6 +279,7 @@ export default function MainContent() {
        <Grid size={{ xs: 12, md: 6 }}>
          <StyledCard
            variant="outlined"
+            onClick={() => onSelectArticle(0)}
            onFocus={() => handleFocus(0)}
            onBlur={handleBlur}
            tabIndex={0}
@@ -311,6 +312,7 @@ export default function MainContent() {
        <Grid size={{ xs: 12, md: 6 }}>
          <StyledCard
            variant="outlined"
+            onClick={() => onSelectArticle(1)}
            onFocus={() => handleFocus(1)}
            onBlur={handleBlur}
            tabIndex={0}
@@ -343,6 +345,7 @@ export default function MainContent() {
        <Grid size={{ xs: 12, md: 4 }}>
          <StyledCard
            variant="outlined"
+            onClick={() => onSelectArticle(2)}
            onFocus={() => handleFocus(2)}
            onBlur={handleBlur}
            tabIndex={0}
@@ -378,6 +381,7 @@ export default function MainContent() {
          >
            <StyledCard
              variant="outlined"
+              onClick={() => onSelectArticle(3)}
              onFocus={() => handleFocus(3)}
              onBlur={handleBlur}
              tabIndex={0}
@@ -412,6 +416,7 @@ export default function MainContent() {
            </StyledCard>
            <StyledCard
              variant="outlined"
+              onClick={() => onSelectArticle(4)}
              onFocus={() => handleFocus(4)}
              onBlur={handleBlur}
              tabIndex={0}
@@ -449,6 +454,7 @@ export default function MainContent() {
        <Grid size={{ xs: 12, md: 4 }}>
          <StyledCard
            variant="outlined"
+            onClick={() => onSelectArticle(5)}
            onFocus={() => handleFocus(5)}
            onBlur={handleBlur}
            tabIndex={0}