MUI blog template example - DAV-1000/react-material GitHub Wiki

import React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';

import Header from './components/Header';
import MainFeaturedPost from './components/MainFeaturedPost';
import FeaturedPost from './components/FeaturedPost';

const featuredPosts = [
  {
    title: 'Post One',
    date: 'Jul 31',
    description: 'This is a wider card with supporting text below.',
    image: 'https://source.unsplash.com/random?tech',
  },
  {
    title: 'Post Two',
    date: 'Jul 30',
    description: 'This is another card with supporting text.',
    image: 'https://source.unsplash.com/random?nature',
  },
];

function App() {
  return (
    <>
      <CssBaseline />
      <Header title="My Blog" />
      <Container maxWidth="lg">
        <MainFeaturedPost />
        <Grid container spacing={4}>
          {featuredPosts.map((post) => (
            <FeaturedPost key={post.title} post={post} />
          ))}
        </Grid>
      </Container>
    </>
  );
}

export default App;

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

interface HeaderProps {
  title: string;
}

const Header: React.FC<HeaderProps> = ({ title }) => (
  <AppBar position="static" color="default" elevation={0}>
    <Toolbar>
      <Typography variant="h6" color="inherit" noWrap>
        {title}
      </Typography>
    </Toolbar>
  </AppBar>
);

export default Header;

import React from 'react';
import { Box, Typography } from '@mui/material';

const MainFeaturedPost: React.FC = () => (
  <Box sx={{ bgcolor: 'grey.200', p: 6, mb: 4 }}>
    <Typography variant="h3" gutterBottom>
      Welcome to My Blog
    </Typography>
    <Typography variant="h6" paragraph>
      Explore insightful articles on tech, development, and design.
    </Typography>
  </Box>
);

export default MainFeaturedPost;

import React from 'react';
import {
  Card,
  CardContent,
  CardMedia,
  Grid,
  Typography,
  Link,
} from '@mui/material';

interface Post {
  title: string;
  date: string;
  description: string;
  image: string;
}

interface FeaturedPostProps {
  post: Post;
}

const FeaturedPost: React.FC<FeaturedPostProps> = ({ post }) => (
  <Grid item xs={12} md={6}>
    <Card sx={{ display: 'flex', flexDirection: 'column' }}>
      <CardMedia component="img" image={post.image} alt={post.title} height="200" />
      <CardContent>
        <Typography component="h2" variant="h5">
          {post.title}
        </Typography>
        <Typography variant="subtitle1" color="text.secondary">
          {post.date}
        </Typography>
        <Typography variant="subtitle1" paragraph>
          {post.description}
        </Typography>
        <Link href="#">Continue reading...</Link>
      </CardContent>
    </Card>
  </Grid>
);

export default FeaturedPost;

// Example in blog/components/Main.tsx
const Main: React.FC<{ posts: Post[] }> = ({ posts }) => {
  // ...
};

import React from 'react';
import Blog from './blog/Blog'; // Adjust path if needed

function App() {
  return <Blog />;
}

export default App;