Created a reddit-card component

packages/web/package.json

@@ -37,8 +37,8 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/javascript-time-ago": "^2.0.3",
     "@types/history": "^4.7.9",
+    "@types/javascript-time-ago": "^2.0.3",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.2",
     "@types/react": "^17.0.19",

packages/web/src/components/reddit-card-details.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en.json";
+import { Typography } from "antd";
+TimeAgo.addLocale(en);
+const timeAgo = new TimeAgo("en-US");
+
+interface Props {
+  title: string;
+  ups: number;
+  author: string;
+  imgs: string;
+  created: number;
+  permalink: string;
+}
+
+const { Text, Title } = Typography;
+const upVote = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 320 512"
+    height="20px"
+    width="15px"
+    style={{ marginTop: "3px" }}
+    fill="#6e6e6e"
+  >
+    <path d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z" />
+  </svg>
+);
+
+const RedditCardDetails: React.FC<Props> = (data) => {
+  return (
+    <div
+      style={{
+        borderBottom: "1px solid black",
+        display: "flex",
+        justifyContent: "space-between",
+        padding: "5px",
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+        <a
+          href={"https://www.reddit.com" + data?.permalink}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Title level={5} style={{ textAlign: "start" }}>
+            {data?.title}
+          </Title>
+        </a>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: "4px",
+          }}
+        >
+          <Text
+            type="secondary"
+            style={{ display: "flex", justifyItems: "center", gap: "2px", fontSize: "14px" }}
+          >
+            {upVote}
+            <Text type="secondary">{data?.ups}</Text>
+          </Text>
+          <Text type="secondary">•</Text>
+          <Text type="secondary">
+            <Text type="secondary">u/{data?.author}</Text>
+          </Text>
+          <Text type="secondary">•</Text>
+          <Text type="secondary">{timeAgo.format(new Date(data?.created * 1000))}</Text>
+        </div>
+      </div>
+      <div>
+        {data?.imgs &&
+          (data?.imgs.includes(".png") ||
+          data?.imgs.includes(".jpg") ||
+          data?.imgs.includes(".jpeg") ? (
+            <img
+              src={data?.imgs}
+              alt="cover_img"
+              style={{ height: "60px", width: "60px", objectFit: "cover", borderRadius: "2px" }}
+            />
+          ) : (
+            ""
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default RedditCardDetails;

packages/web/src/components/reddit-card.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import RedditCardDetails from "./reddit-card-details";
+import { useState, useEffect } from "react";
+import { Card, Typography } from "antd";
+const { Title } = Typography;
+interface Props {
+  height: number;
+  width: number;
+}
+const RedditCard: React.FC<Props> = (size) => {
+  const [postData, setpostData] = useState([]);
+  const [fetched, setFetched] = useState(false);
+  const data = async () => {
+    const res = await fetch("https://www.reddit.com/r/CompanyOfHeroes/top.json?limit=50&t=week");
+    const resData = await res.json();
+    const requierdData = resData?.data?.children
+      .filter(function (e: any) {
+        return e?.data?.link_flair_text === "CoH2";
+      })
+      .slice(0, 10);
+    setpostData(requierdData);
+    setFetched(true);
+    return postData;
+  };
+  useEffect(() => {
+    data();
+  }, [fetched]);
+
+  return (
+    <div>
+      <Card style={{ width: size.width, height: size.height, flexGrow: 1 }}>
+        <div style={{ overflow: "hidden" }}>
+          <Title level={3}>Top Reddit Posts</Title>
+          <p>r/CompanyOfHeros</p>
+          {postData.map((item: any, index: number) => {
+            return (
+              item && (
+                <RedditCardDetails
+                  key={index}
+                  title={item?.data?.title}
+                  ups={item?.data?.ups}
+                  author={item?.data?.author}
+                  imgs={item?.data?.url_overridden_by_dest}
+                  created={item?.data?.created}
+                  permalink={item?.data.permalink}
+                ></RedditCardDetails>
+              )
+            );
+          })}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default RedditCard;