From cf80b8793812c817bdb4bd3487f1856bcf6b9983 Mon Sep 17 00:00:00 2001
From: rolljee <n.riquelmebareiro@gmail.com>
Date: Sun, 19 Nov 2023 15:39:38 +0100
Subject: [PATCH] Fix issue with redirect when we go out of website

---
 src/components/ListBlogItem.js | 39 ++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/ListBlogItem.js

diff --git a/src/components/ListBlogItem.js b/src/components/ListBlogItem.js
new file mode 100644
index 0000000..fabc8e4
--- /dev/null
+++ b/src/components/ListBlogItem.js
@@ -0,0 +1,39 @@
+import ListGroup from "react-bootstrap/ListGroup";
+import Image from "react-bootstrap/Image";
+import { Row, Col, Badge, Stack } from "react-bootstrap";
+
+function listBlogItem(props) {
+  const redirect = (p) => {
+    window.open(`#${p.link}`, "_blank");
+  };
+
+  return (
+    <ListGroup.Item
+      action
+      onClick={() => redirect(props)}
+      key={props.title}
+      className="mt-3"
+    >
+      <Row description="horizontal" gap={3}>
+        <Col xs={6} md={2}>
+          <Image src={props.image} rounded fluid />
+        </Col>
+        <Col xs={6} md={10} className="d-flex flex-column align-self-center">
+          <h4 className="font-title">{props.title}</h4>
+          <h6 className="font-description">{props.description}</h6>
+          <Stack direction="horizontal" gap={2} className="mt-2">
+            {props.tags && props.tags.map((tag, idx) => {
+              return (
+                <Badge bg="primary" key={idx}>
+                  {tag}
+                </Badge>
+              );
+            })}
+          </Stack>
+        </Col>
+      </Row>
+    </ListGroup.Item>
+  );
+}
+
+export default listBlogItem;