Initial commit 🚀

components/Home/posts/loading/Loading.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./loading.scss";
+
+const Loading = (props) => {
+    return (
+        <div className={`loading ${props.class}`}>
+            <svg
+                className="spinner"
+                width="60px"
+                height="60px"
+                viewBox="0 0 132 132"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <circle
+                    className="path"
+                    fill="none"
+                    strokeWidth="6"
+                    strokeLinecap="round"
+                    cx="66"
+                    cy="66"
+                    r="60"
+                />
+            </svg>
+        </div>
+    )
+};
+
+export default Loading;

components/Home/posts/loading/loading.scss

@@ -0,0 +1,38 @@
+// loading
+$offset: 374;
+$duration: 1.4s;
+
+.spinner {
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash $duration ease-in-out infinite;
+  stroke: black;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: $offset;
+  }
+  50% {
+    stroke-dashoffset: $offset/4;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: $offset;
+    transform: rotate(450deg);
+  }
+}

components/Home/posts/posts.js

@@ -0,0 +1,69 @@
+import React, {useEffect, useState} from "react";
+import "./posts.scss";
+import Tag from "../tag/tag";
+import * as axios from "axios";
+import Loading from "./loading/Loading";
+import Link from "next/link";
+import 'moment/locale/fr';
+import Moment, { now } from 'react-moment';
+
+const Posts = () => {
+
+    const [isLoading, setLoading] = useState(true);
+    const [getPosts, setPosts] = useState([]);
+
+    useEffect(() => {
+        loadPosts()
+            .then(() => {
+                setLoading(false);
+            })
+            .catch(error => console.log(error));
+    }, []);
+
+    const loadPosts = async () => {
+        await axios.get("https://localhost:8080/api/posts")
+            .then(response => {
+                setPosts(response);
+            })
+            .catch(error => console.log(error));
+    }
+
+    const renderPosts = () => {
+        if (getPosts.length) {
+            return (
+                <div className="post-container container">
+                    {getPosts.map(post => {
+                        return (
+                            <div className="post">
+                                <Link href={`/blog/${post.id}`}>
+                                    <a>
+                                        <div className="post-cover" style={{backgroundImage: `url(${post.image})`}}/>
+                                        <h3>{post.title}</h3>
+                                    </a>
+                                </Link>
+                                <div className="post-date">
+                                    <Moment to={post.date}>{now}</Moment>
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            )
+        } else {
+            return (
+                <div className="no-post container">
+                    <h1>Il n'y a malheureusement aucun article de posté pour le moment. 😕</h1>
+                </div>
+            )
+        }
+    };
+
+    return (
+        <section id="posts">
+            <Tag color="#FF9900" background="#FFEED9" left={false}>Mon blog</Tag>
+            {isLoading ? <Loading class="loader container" /> : renderPosts()}
+        </section>
+    )
+};
+
+export default Posts;

components/Home/posts/posts.scss

@@ -0,0 +1,21 @@
+#posts {
+  height: 70vh;
+  width: 100%;
+  background-color: white;
+  color: #37383F;
+
+  @media screen and (max-width: 700px) {
+    text-align: center;
+    font-size: 15px;
+  }
+
+  .container {
+    width: 100%;
+    height: 70vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+  }
+
+}