recent publications cambiado

app/sass/main.scss

@@ -7,7 +7,7 @@
 @import "partials/_tools.sass";
 @import "partials/_footer.sass";
 @import "lib/_responsive.sass";
-
+@import "partials/_recentPublications.sass";
 @import "lib/_type.sass";
 @import "lib/_variables.sass";
 @import "lib/_mixins.sass";

app/sass/partials/_recentPublications.sass

@@ -0,0 +1,11 @@
+@import '../lib/_variables.sass'
+
+.article
+    display: flex
+    .article_border
+    .article_content
+        display: flex
+        flex-direction: column
+        .article_title
+            font-weight: $bold
+

components/RecentPublications.js

@@ -1,28 +1,36 @@
-import React from 'react';
-import {useState, useEffect} from 'react';
-import { mypublications } from '../constants/publications';
+import React from "react";
+import { useState, useEffect } from "react";
+import { mypublications } from "../constants/publications";
 
-export default function RecentPublications (props) {
-    const [papers, setPapers] = useState(mypublications);
+export default function RecentPublications(props) {
+  const [papers, setPapers] = useState(mypublications);
 
-    useEffect(() => {
-		window.scrollTo(0,0);		
-	}, []);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
-        return <div className="_pubications _recent_publications">
-            { papers.filter(paper => {
-                    return (
-                        paper.type === "article-journal"
-                    );
-                })
-                .filter((i, index) => (index < 3))
-                .map(({doi, content}) => {
-                    return (
-                        <a key={doi} href={doi} target="_blank" rel="noopener noreferrer">
-                            <p style={{ color: "black" }}dangerouslySetInnerHTML={{__html: content}}></p>
-                        </a>
-                     );
-                 })}
-            </div>    
-
-}
+  return (
+    <div className="_pubications _recent_publications">
+      {papers
+        .filter((paper) => {
+          return paper.type === "article-journal";
+        })
+        .filter((i, index) => index < 3)
+        .map(({ doi,title,author,date, content }) => {
+          return (
+            <a key={doi} href={doi} target="_blank" rel="noopener noreferrer">
+              <div className="article">
+                <div className="article_border"></div>
+                <div className="article_content">
+                <div className="article_top"><span>{date}</span></div>
+                <h5 className="article_title">{title}</h5>
+                <div className="article_author">{author}</div>
+                <div className="article_doi">{doi}</div>
+                </div>
+              </div>
+            </a>
+          );
+        })}
+    </div>
+  );
+}