8 | );
9 |
10 | export default EmptyList;
11 |
--------------------------------------------------------------------------------
/beginners-blog/src/components/common/EmptyList/styles.css:
--------------------------------------------------------------------------------
1 | .emptyList-wrap {
2 | display: flex;
3 | justify-content: center;
4 | }
5 | .emptyList-wrap img {
6 | max-width: 250px;
7 | width: 100%;
8 | }
9 |
--------------------------------------------------------------------------------
/beginners-blog/src/config/data.js:
--------------------------------------------------------------------------------
1 | export const blogList = [
2 | {
3 | id: 1,
4 | title: '7 CSS tools you should be using ',
5 | category: 'development',
6 | subCategory: ['frontend', 'ui/ux', 'design'],
7 | description:
8 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
9 | authorName: 'John Doe',
10 | authorAvatar: '/assets/images/author.jpg',
11 | createdAt: 'June 03, 2021',
12 | cover: '/assets/images/designer-1.jpg',
13 | },
14 | {
15 | id: 2,
16 | title: 'Milan Places That Highlight The City',
17 | category: 'travel',
18 | subCategory: ['vacation', 'holidays', 'sight seeing'],
19 | description:
20 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
21 | authorName: 'John Doe',
22 | authorAvatar: '/assets/images/author.jpg',
23 | createdAt: 'June 03, 2021',
24 | cover: '/assets/images/f67396fc3cfce63a28e07ebb35d974ac.jpg',
25 | },
26 | {
27 | id: 3,
28 | title: 'Online Shopping – An Alternative to Shopping in the Mall',
29 | category: 'shopping',
30 | subCategory: ['e-commerce store', 'clothing', 'shopping store'],
31 | description:
32 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
33 | authorName: 'John Doe',
34 | authorAvatar: '/assets/images/author.jpg',
35 | createdAt: 'June 03, 2021',
36 | cover: '/assets/images/fQwuyKJ9qxjSbr6REcgtmW-1200-80.jpg',
37 | },
38 | {
39 | id: 4,
40 | title: 'ADVENTURE IN YOU',
41 | category: 'adventure',
42 | subCategory: ['adrenaline', 'stay-fit', 'lifestyle'],
43 | description:
44 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
45 | authorName: 'John Doe',
46 | authorAvatar: '/assets/images/author.jpg',
47 | createdAt: 'June 03, 2021',
48 | cover: '/assets/images/graphic-design-trends.png',
49 | },
50 | {
51 | id: 5,
52 | title: 'Loaded BBQ Baked Potatoes',
53 | category: 'cooking',
54 | subCategory: ['bbq', 'food', 'lifestyle'],
55 | description:
56 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
57 | authorName: 'John Doe',
58 | authorAvatar: '/assets/images/author.jpg',
59 | createdAt: 'June 03, 2021',
60 | cover: '/assets/images/make-it-personal.jpg',
61 | },
62 | {
63 | id: 6,
64 | title: 'Beyond the Beach',
65 | category: 'travel',
66 | subCategory: ['beaches', 'sea', 'holidays'],
67 | description:
68 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
69 | authorName: 'John Doe',
70 | authorAvatar: '/assets/images/author.jpg',
71 | createdAt: 'June 03, 2021',
72 | cover:
73 | '/assets/images/Purple-Combination-colors-graphic-design-predictions-1024x576-1024x576.jpg',
74 | },
75 | {
76 | id: 7,
77 | title: 'Art & Perception',
78 | category: 'art',
79 | subCategory: ['skill', 'design', 'passion'],
80 | description:
81 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
82 | authorName: 'John Doe',
83 | authorAvatar: '/assets/images/author.jpg',
84 | createdAt: 'June 03, 2021',
85 | cover: '/assets/images/Synthwave-Postmodern.jpg',
86 | },
87 | ];
88 |
--------------------------------------------------------------------------------
/beginners-blog/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import { BrowserRouter } from 'react-router-dom';
5 |
6 | ReactDOM.render(
7 |
8 |
9 |
10 |
11 | ,
12 | document.getElementById('root')
13 | );
14 |
--------------------------------------------------------------------------------
/beginners-blog/src/pages/Blog/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { useParams } from 'react-router';
3 | import { blogList } from '../../config/data';
4 | import Chip from '../../components/common/Chip';
5 | import EmptyList from '../../components/common/EmptyList';
6 | import './styles.css';
7 | import { Link } from 'react-router-dom';
8 |
9 | const Blog = () => {
10 | const { id } = useParams();
11 | const [blog, setBlog] = useState(null);
12 |
13 | useEffect(() => {
14 | let blog = blogList.find((blog) => blog.id === parseInt(id));
15 | if (blog) {
16 | setBlog(blog);
17 | }
18 | }, []);
19 |
20 | return (
21 | <>
22 |
23 | ←Go Back
24 |
25 | {blog ? (
26 |
7 |