From e89ae1b71c3e9d14aff14d6f6de4d0437ad6dbfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?T=C3=AAn=20c=E1=BB=A7a=20b=E1=BA=A1n?=
 <jungjihoonkr97@gmail.com>
Date: Sat, 3 Sep 2022 12:52:59 +0700
Subject: [PATCH] code homepage blog basic

---
 package.json                            |  1 +
 src/components/footer/UIFooter.tsx      | 47 ++++++++++++
 src/components/header/UIHeader.tsx      | 97 +++++++++++++------------
 src/components/markdown/UIMarkdown.tsx  | 50 +++++++++++++
 src/components/posts/UIFeaturedPost.tsx | 52 +++++++++++++
 src/components/posts/UIMainPost.tsx     | 38 ++++++++++
 src/components/sidebar/UISidebar.tsx    | 67 +++++++++++++++++
 src/components/slider/UISlider.tsx      | 83 +++++++++++++++++++++
 src/pages/UIApp.tsx                     | 17 -----
 src/pages/{ => app}/App.scss            |  0
 src/pages/app/UIApp.tsx                 | 10 +++
 src/pages/index.tsx                     | 97 ++++++++++++++++++++++---
 src/typings.d.ts                        |  0
 13 files changed, 484 insertions(+), 75 deletions(-)
 create mode 100644 src/components/footer/UIFooter.tsx
 create mode 100644 src/components/markdown/UIMarkdown.tsx
 create mode 100644 src/components/posts/UIFeaturedPost.tsx
 create mode 100644 src/components/posts/UIMainPost.tsx
 create mode 100644 src/components/sidebar/UISidebar.tsx
 create mode 100644 src/components/slider/UISlider.tsx
 delete mode 100644 src/pages/UIApp.tsx
 rename src/pages/{ => app}/App.scss (100%)
 create mode 100644 src/pages/app/UIApp.tsx
 create mode 100644 src/typings.d.ts

diff --git a/package.json b/package.json
index 7f26f81..93f694f 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^4.0.0",
+    "markdown-to-jsx": "^7.1.7",
     "node-sass": "^7.0.1",
     "prettier": "^2.7.1"
   },
diff --git a/src/components/footer/UIFooter.tsx b/src/components/footer/UIFooter.tsx
new file mode 100644
index 0000000..c7f4800
--- /dev/null
+++ b/src/components/footer/UIFooter.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://devteamvietnam.github.io/shdsvn.com/">
+        SHDSVN
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+interface FooterProps {
+  description: string;
+  title: string;
+}
+
+export class UIFooter extends React.Component<FooterProps> {
+  render(): React.ReactNode {
+    const { description, title } = this.props;
+    return (
+      <Box component="footer" sx={{ bgcolor: 'background.paper', py: 6 }}>
+        <Container maxWidth="lg">
+          <Typography variant="h6" align="center" gutterBottom>
+            {title}
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            align="center"
+            color="text.secondary"
+            component="p"
+          >
+            {description}
+          </Typography>
+          <Copyright />
+        </Container>
+      </Box>
+    );
+  }
+}
diff --git a/src/components/header/UIHeader.tsx b/src/components/header/UIHeader.tsx
index 8e08b96..9ecfceb 100644
--- a/src/components/header/UIHeader.tsx
+++ b/src/components/header/UIHeader.tsx
@@ -1,19 +1,20 @@
 import React, { Component } from 'react';
 
+import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import SearchIcon from '@mui/icons-material/Search';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
+import Button from '@mui/material/Button';
 
 import logo from '../../assets/images/logo.svg';
 
 import '../header/style.scss';
 
 interface HeaderProps {
-  sections: ReadonlyArray<{
+  sections: Array<{
     title: string;
     url: string;
+    description: string;
   }>;
   title: string;
 }
@@ -24,52 +25,52 @@ export class UIHeader extends Component<HeaderProps> {
 
     return (
       <React.Fragment>
-        <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <Typography
-            component="h1"
-            variant="h5"
-            color="inherit"
-            align="left"
-            noWrap
-            mt={1}
-            sx={{ flex: 1 }}
-          >
-            {title}
-          </Typography>
-          <Typography
-            component="h1"
-            variant="h5"
-            color="inherit"
-            align="left"
-            noWrap
-            mt={1}
-            sx={{ flex: 1 }}
-          >
-            <img src={logo} className="App-logo-header" alt="logo" />
-          </Typography>
-          <IconButton>
-            <SearchIcon />
-          </IconButton>
-        </Toolbar>
-        <Toolbar
-          component="nav"
-          variant="dense"
-          sx={{ justifyContent: 'space-between', overflowX: 'auto' }}
-        >
-          {sections.map(section => (
-            <Link
-              color="primary"
-              rel="noopener"
-              underline="none"
-              key={section.title}
-              variant="body2"
-              href={section.url}
-              sx={{ p: 2, flexShrink: 0 }}
+        <AppBar position="relative">
+          <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Typography
+              component="h1"
+              variant="h5"
+              color="inherit"
+              align="left"
+              noWrap
+              mt={1}
+              sx={{ flex: 1 }}
             >
-              {section.title}
-            </Link>
-          ))}
-        </Toolbar>
+              {title}
+            </Typography>
+            <Typography
+              component="h1"
+              variant="h5"
+              color="inherit"
+              align="left"
+              noWrap
+              mt={1}
+              sx={{ flex: 1 }}
+            >
+              <img src={logo} className="App-logo-header" alt="logo" />
+            </Typography>
+            <Button variant="outlined" size="small"></Button>
+          </Toolbar>
+          <Toolbar
+            component="nav"
+            variant="dense"
+            sx={{ justifyContent: 'center', overflowX: 'auto' }}
+          >
+            {sections.map(section => (
+              <Link
+                color="inherit"
+                rel="noopener"
+                underline="none"
+                key={section.title}
+                variant="body1"
+                href={section.url}
+                sx={{ p: 2, flexShrink: 0 }}
+              >
+                {section.title}
+              </Link>
+            ))}
+          </Toolbar>
+        </AppBar>
       </React.Fragment>
     );
   }
diff --git a/src/components/markdown/UIMarkdown.tsx b/src/components/markdown/UIMarkdown.tsx
new file mode 100644
index 0000000..2d8867f
--- /dev/null
+++ b/src/components/markdown/UIMarkdown.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import ReactMarkdown from 'markdown-to-jsx';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
+
+function MarkdownListItem(props: any) {
+  return <Box component="li" sx={{ mt: 1, typography: 'body1' }} {...props} />;
+}
+
+const options = {
+  overrides: {
+    h1: {
+      component: Typography,
+      props: {
+        gutterBottom: true,
+        variant: 'h4',
+        component: 'h1'
+      }
+    },
+    h2: {
+      component: Typography,
+      props: { gutterBottom: true, variant: 'h6', component: 'h2' }
+    },
+    h3: {
+      component: Typography,
+      props: { gutterBottom: true, variant: 'subtitle1' }
+    },
+    h4: {
+      component: Typography,
+      props: {
+        gutterBottom: true,
+        variant: 'caption',
+        paragraph: true
+      }
+    },
+    p: {
+      component: Typography,
+      props: { paragraph: true }
+    },
+    a: { component: Link },
+    li: {
+      component: MarkdownListItem
+    }
+  }
+};
+
+export default function Markdown(props: any) {
+  return <ReactMarkdown options={options} {...props} />;
+}
diff --git a/src/components/posts/UIFeaturedPost.tsx b/src/components/posts/UIFeaturedPost.tsx
new file mode 100644
index 0000000..f552693
--- /dev/null
+++ b/src/components/posts/UIFeaturedPost.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+
+interface FeaturedPostProps {
+  post: {
+    date: string;
+    description: string;
+    image: string;
+    imageLabel: string;
+    title: string;
+  };
+}
+
+export class UIFeaturedPost extends React.Component<FeaturedPostProps> {
+  render() {
+    const { post } = this.props;
+
+    return (
+      <Grid item xs={12} md={6}>
+        <CardActionArea component="a" href="#">
+          <Card elevation={2} sx={{ display: 'flex' }}>
+            <CardContent sx={{ flex: 1 }}>
+              <Typography component="h2" variant="h5">
+                {post.title}
+              </Typography>
+              <Typography variant="subtitle1" color="text.secondary">
+                {post.date}
+              </Typography>
+              <Typography variant="subtitle1" paragraph>
+                {post.description}
+              </Typography>
+              <Typography variant="subtitle1" color="primary">
+                Continue reading...
+              </Typography>
+            </CardContent>
+            <CardMedia
+              component="img"
+              sx={{ width: 160, display: { xs: 'none', sm: 'block' } }}
+              image={post.image}
+              alt={post.imageLabel}
+            />
+          </Card>
+        </CardActionArea>
+      </Grid>
+    );
+  }
+}
diff --git a/src/components/posts/UIMainPost.tsx b/src/components/posts/UIMainPost.tsx
new file mode 100644
index 0000000..2ea400f
--- /dev/null
+++ b/src/components/posts/UIMainPost.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Markdown from '../markdown/UIMarkdown';
+
+interface MainProps {
+  posts: Array<string>;
+  title: string;
+}
+
+export class UIMainPost extends React.Component<MainProps> {
+  render(): React.ReactNode {
+    const { posts, title } = this.props;
+    return (
+      <Grid
+        item
+        xs={12}
+        md={8}
+        sx={{
+          '& .markdown': {
+            py: 3
+          }
+        }}
+      >
+        <Typography variant="h6" gutterBottom>
+          {title}
+        </Typography>
+        <Divider />
+        {posts.map(post => (
+          <Markdown className="markdown" key={post.substring(0, 40)}>
+            {post}
+          </Markdown>
+        ))}
+      </Grid>
+    );
+  }
+}
diff --git a/src/components/sidebar/UISidebar.tsx b/src/components/sidebar/UISidebar.tsx
new file mode 100644
index 0000000..8f1d11d
--- /dev/null
+++ b/src/components/sidebar/UISidebar.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+
+interface SidebarProps {
+  archives: Array<{
+    url: string;
+    title: string;
+  }>;
+  description: string;
+  social: Array<{
+    icon: React.ElementType;
+    name: string;
+  }>;
+  title: string;
+}
+
+export class UISideBar extends React.Component<SidebarProps> {
+  render() {
+    const { archives, description, social, title } = this.props;
+    return (
+      <Grid item xs={12} md={4}>
+        <Paper elevation={2} sx={{ p: 3, bgcolor: 'grey.200' }}>
+          <Typography variant="h5" gutterBottom>
+            {title}
+          </Typography>
+          <Typography>{description}</Typography>
+        </Paper>
+        <Typography variant="h5" gutterBottom sx={{ p: 3 }}>
+          Archives
+          {archives.map(archive => (
+            <Link
+              display="block"
+              variant="body1"
+              underline="none"
+              href={archive.url}
+              key={archive.title}
+            >
+              {archive.title}
+            </Link>
+          ))}
+        </Typography>
+        <Typography variant="h6" gutterBottom sx={{ p: 3 }}>
+          Social
+          {social.map(network => (
+            <Link
+              display="block"
+              variant="body1"
+              underline="none"
+              href="#"
+              key={network.name}
+              sx={{ mb: 0.5 }}
+            >
+              <Stack direction="row" spacing={1} alignItems="center">
+                <network.icon />
+                <span>{network.name}</span>
+              </Stack>
+            </Link>
+          ))}
+        </Typography>
+      </Grid>
+    );
+  }
+}
diff --git a/src/components/slider/UISlider.tsx b/src/components/slider/UISlider.tsx
new file mode 100644
index 0000000..ddf4cad
--- /dev/null
+++ b/src/components/slider/UISlider.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
+
+interface SliderProps {
+  post: {
+    description: string;
+    image: string;
+    imageText: string;
+    linkText: string;
+    title: string;
+  };
+}
+
+export class Slider extends React.Component<SliderProps> {
+  render() {
+    const { post } = this.props;
+
+    return (
+      <Paper
+        elevation={2}
+        sx={{
+          position: 'relative',
+          backgroundColor: 'grey.800',
+          color: '#fff',
+          mb: 4,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          backgroundImage: `url(${post.image})`
+        }}
+      >
+        {/* Increase the priority of the hero background image */}
+        {
+          <img
+            style={{ display: 'none' }}
+            src={post.image}
+            alt={post.imageText}
+          />
+        }
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0,
+            backgroundColor: 'rgba(0,0,0,.3)'
+          }}
+        />
+        <Grid container>
+          <Grid item md={6}>
+            <Box
+              sx={{
+                position: 'relative',
+                p: { xs: 3, md: 6 },
+                pr: { md: 0 }
+              }}
+            >
+              <Typography
+                component="h1"
+                variant="h3"
+                color="inherit"
+                gutterBottom
+              >
+                {post.title}
+              </Typography>
+              <Typography variant="h5" color="inherit" paragraph>
+                {post.description}
+              </Typography>
+              <Link underline="none" variant="subtitle1" href="#">
+                {post.linkText}
+              </Link>
+            </Box>
+          </Grid>
+        </Grid>
+      </Paper>
+    );
+  }
+}
diff --git a/src/pages/UIApp.tsx b/src/pages/UIApp.tsx
deleted file mode 100644
index 6771df5..0000000
--- a/src/pages/UIApp.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import { AppContextProps } from '@/api';
-
-import logo from '../assets/images/logo.svg';
-import './App.scss';
-
-export class App extends Component<AppContextProps> {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-        </header>
-      </div>
-    );
-  }
-}
diff --git a/src/pages/App.scss b/src/pages/app/App.scss
similarity index 100%
rename from src/pages/App.scss
rename to src/pages/app/App.scss
diff --git a/src/pages/app/UIApp.tsx b/src/pages/app/UIApp.tsx
new file mode 100644
index 0000000..dc48b67
--- /dev/null
+++ b/src/pages/app/UIApp.tsx
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import { AppContextProps } from '@/api';
+
+import './App.scss';
+
+export class App extends Component<AppContextProps> {
+  render() {
+    return <div className="App">Comming soon...</div>;
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 75cbe92..ba5807f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,13 +2,20 @@ import React, { Component } from 'react';
 
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import TwitterIcon from '@mui/icons-material/Twitter';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Grid from '@mui/material/Grid';
 
 import { AppContext } from '../api';
 
-import { App } from './UIApp';
-
 import { UIHeader } from '../components/header/UIHeader';
+import { Slider } from '../components/slider/UISlider';
+import { UIFeaturedPost } from '../components/posts/UIFeaturedPost';
+import { UISideBar } from '../components/sidebar/UISidebar';
+import { UIMainPost } from '../components/posts/UIMainPost';
+import { UIFooter } from '../components/footer/UIFooter';
 
 export class UIPages extends Component {
   appContext: AppContext;
@@ -22,23 +29,93 @@ export class UIPages extends Component {
     const theme = createTheme();
 
     const sections = [
-      { title: 'Home', url: '#' },
-      { title: 'Blog', url: '#' },
-      { title: 'Project', url: '#' },
-      { title: 'About', url: '#' }
+      { title: 'Home', url: '#', description: '' },
+      { title: 'Blog', url: '#', description: '' },
+      { title: 'Project', url: '#', description: '' },
+      { title: 'About', url: '#', description: '' }
     ];
 
-    let event = this.appContext.consumeEvent();
-
+    const SliderProps = {
+      title: 'Title of a longer featured blog post',
+      description:
+        'Multiple lines of text that form the vn, informing new readers quickly and efficiently about whats most interesting in this posts contents.',
+      image: 'https://source.unsplash.com/random',
+      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',
+        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',
+        imageLabel: 'Image Text'
+      }
+    ];
+    const sidebar = {
+      title: 'About',
+      description: 'Design blog with React Typescript',
+      archives: [
+        { title: 'March 2022', url: '#' },
+        { title: 'February 2022', url: '#' },
+        { title: 'January 2022', url: '#' },
+        { title: 'November 2021', url: '#' },
+        { title: 'October 2021', url: '#' },
+        { title: 'September 2021', url: '#' },
+        { title: 'August 2021', url: '#' },
+        { title: 'July 2021', url: '#' },
+        { title: 'June 2021', url: '#' },
+        { title: 'May 2021', url: '#' },
+        { title: 'April 2021', url: '#' }
+      ],
+      social: [
+        { name: 'GitHub', icon: GitHubIcon },
+        { name: 'Twitter', icon: TwitterIcon },
+        { name: 'Facebook', icon: FacebookIcon }
+      ]
+    };
+    const posts = [];
     return (
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Container maxWidth="lg">
+        <Container maxWidth="xl">
           <UIHeader sections={sections} title={'SHDSVN'} />
           <main>
-            <App appContext={this.appContext} event={event} />
+            <Slider post={SliderProps} />
+            <Grid
+              container
+              spacing={4}
+              rowSpacing={1}
+              columnSpacing={{ xs: 1, sm: 2, md: 3 }}
+            >
+              {featuredPosts.map(post => (
+                <UIFeaturedPost key={post.title} post={post} />
+              ))}
+            </Grid>
+            <Grid container spacing={5} sx={{ mt: 3 }}>
+              <UIMainPost title="From with luv" posts={posts} />
+              <UISideBar
+                title={sidebar.title}
+                description={sidebar.description}
+                archives={sidebar.archives}
+                social={sidebar.social}
+              />
+            </Grid>
           </main>
         </Container>
+        <UIFooter
+          title="SHDSVN"
+          description="Design by ddthien.dev@gmail.com!"
+        />
       </ThemeProvider>
     );
   }
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..e69de29