feat: Add news page

components/wppassage.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
+import { Divider } from "@nextui-org/divider";
+import { Link } from "@nextui-org/link";
+
+export function Passage(props: {
+  title: string;
+  description: string;
+  url: string;
+  publishtime: string;
+}) {
+  let publishtime = props.publishtime.replace("T", " ").replace("Z", "");
+
+  return (
+    <Card className="mt-5 p-1">
+      <CardHeader>
+        <Link href={props.url}>
+          <h2
+            dangerouslySetInnerHTML={{ __html: props.title }}
+            className="font-bold"
+          />
+        </Link>
+      </CardHeader>
+      <CardBody>
+        <p dangerouslySetInnerHTML={{ __html: props.description }} />
+      </CardBody>
+      <Divider />
+      <CardFooter>
+        <p>{publishtime}</p>
+      </CardFooter>
+    </Card>
+  );
+}

package.json

@@ -12,12 +12,14 @@
 		"@nextui-org/button": "2.0.37",
 		"@nextui-org/card": "^2.0.33",
 		"@nextui-org/code": "2.0.32",
+		"@nextui-org/divider": "^2.0.31",
 		"@nextui-org/image": "^2.0.31",
 		"@nextui-org/input": "2.2.4",
 		"@nextui-org/kbd": "2.0.33",
 		"@nextui-org/link": "2.0.34",
 		"@nextui-org/listbox": "2.1.25",
 		"@nextui-org/navbar": "2.0.36",
+		"@nextui-org/skeleton": "^2.0.31",
 		"@nextui-org/snippet": "2.0.41",
 		"@nextui-org/switch": "2.0.33",
 		"@nextui-org/system": "2.2.5",

pages/news.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import DefaultLayout from "@/layouts/default";
+import { Passage } from "@/components/wppassage";
+import { Skeleton } from "@nextui-org/skeleton";
+import { Card } from "@nextui-org/card";
+
+export default function NewsPage() {
+  const [passages, setPassages] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("https://mc.hjfunny.site/wp-json/wp/v2/posts?per_page=20")
+      .then((response) => response.json())
+      .then((data) => {
+        setPassages(data);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <DefaultLayout>
+      <section className="max-w-6xl mx-auto px-10 py-5 my-8">
+        <h1 className="text-lg font-bold">最近新闻</h1>
+
+          {loading ? (
+            <Card className="mt-5 p-8">
+              <Skeleton className="rounded-lg mb-2">
+                <h2>Skeleton</h2>
+              </Skeleton>
+              <Skeleton className="rounded-lg">
+                <h2>Skeleton<br/>Skeleton<br/>Skeleton<br/>Skeleton</h2>
+              </Skeleton>
+            </Card>
+          ) : (
+            passages.map((passage) => (
+              <Passage
+                key={passage["id"]}
+                description={passage["excerpt"]["rendered"]}
+                publishtime={passage["date"]}
+                title={passage["title"]["rendered"]}
+                url={`/post/${passage["slug"]}`}
+              />
+            ))
+          )}
+      </section>
+    </DefaultLayout>
+  );
+}