news & things

frontend/app/src/components/news/NewsListCard.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import "../styles.css";
+import { Card, Spin } from "antd";
+import { News, useGetNewsQuery } from "../../slice/NewsApi";
+import { ClockCircleOutlined } from "@ant-design/icons";
+
+const formatTime = (s: string) => {
+  const d = new Date(s);
+  return d.toLocaleString();
+};
+
+const NewsListCard = (): JSX.Element => {
+  const { data, isLoading } = useGetNewsQuery({});
+  return (
+    <div className="card">
+      <Spin spinning={isLoading}>
+        {data &&
+          data.map((news: News) => (
+            <Card
+              title={news.title}
+              key={news.id}
+              style={{ width: "100%", marginBottom: "1rem" }}
+              bordered={false}
+            >
+              <p style={{ textAlign: "left", color: "white" }}>
+                {news.content}
+              </p>
+              <br />
+              <div className="news-footer">
+                <ClockCircleOutlined />
+                <br />
+                <p style={{ marginLeft: "1rem" }}>{formatTime(news.created)}</p>
+              </div>
+            </Card>
+          ))}
+      </Spin>
+    </div>
+  );
+};
+export default NewsListCard;