-
-
Notifications
You must be signed in to change notification settings - Fork 31.9k
/
Blog.tsx
119 lines (112 loc) · 3.81 KB
/
Blog.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';
import GitHubIcon from '@mui/icons-material/GitHub';
import FacebookIcon from '@mui/icons-material/Facebook';
import XIcon from '@mui/icons-material/X';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Header from './Header';
import MainFeaturedPost from './MainFeaturedPost';
import FeaturedPost from './FeaturedPost';
import Main from './Main';
import Sidebar from './Sidebar';
import Footer from './Footer';
import post1 from './blog-post.1.md';
import post2 from './blog-post.2.md';
import post3 from './blog-post.3.md';
const sections = [
{ title: 'Technology', url: '#' },
{ title: 'Design', url: '#' },
{ title: 'Culture', url: '#' },
{ title: 'Business', url: '#' },
{ title: 'Politics', url: '#' },
{ title: 'Opinion', url: '#' },
{ title: 'Science', url: '#' },
{ title: 'Health', url: '#' },
{ title: 'Style', url: '#' },
{ title: 'Travel', url: '#' },
];
const mainFeaturedPost = {
title: 'Title of a longer featured blog post',
description:
"Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.",
image: 'https://source.unsplash.com/random?wallpapers',
imageText: 'main image description',
linkText: 'Continue reading…',
};
const featuredPosts = [
{
title: 'Featured post',
date: 'Nov 12',
description:
'This is a wider card with supporting text below as a natural lead-in to additional content.',
image: 'https://source.unsplash.com/random?wallpapers',
imageLabel: 'Image Text',
},
{
title: 'Post title',
date: 'Nov 11',
description:
'This is a wider card with supporting text below as a natural lead-in to additional content.',
image: 'https://source.unsplash.com/random?wallpapers',
imageLabel: 'Image Text',
},
];
const posts = [post1, post2, post3];
const sidebar = {
title: 'About',
description:
'Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.',
archives: [
{ title: 'March 2020', url: '#' },
{ title: 'February 2020', url: '#' },
{ title: 'January 2020', url: '#' },
{ title: 'November 1999', url: '#' },
{ title: 'October 1999', url: '#' },
{ title: 'September 1999', url: '#' },
{ title: 'August 1999', url: '#' },
{ title: 'July 1999', url: '#' },
{ title: 'June 1999', url: '#' },
{ title: 'May 1999', url: '#' },
{ title: 'April 1999', url: '#' },
],
social: [
{ name: 'GitHub', icon: GitHubIcon },
{ name: 'X', icon: XIcon },
{ name: 'Facebook', icon: FacebookIcon },
],
};
// TODO remove, this demo shouldn't need to reset the theme.
const defaultTheme = createTheme();
export default function Blog() {
return (
<ThemeProvider theme={defaultTheme}>
<CssBaseline />
<Container maxWidth="lg">
<Header title="Blog" sections={sections} />
<main>
<MainFeaturedPost post={mainFeaturedPost} />
<Grid container spacing={4}>
{featuredPosts.map((post) => (
<FeaturedPost key={post.title} post={post} />
))}
</Grid>
<Grid container spacing={5} sx={{ mt: 3 }}>
<Main title="From the firehose" posts={posts} />
<Sidebar
title={sidebar.title}
description={sidebar.description}
archives={sidebar.archives}
social={sidebar.social}
/>
</Grid>
</main>
</Container>
<Footer
title="Footer"
description="Something here to give the footer a purpose!"
/>
</ThemeProvider>
);
}