72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { PostEntity } from "@3rapp/api/modules/content/entities/post.entity";
|
||
import { StyleProvider } from "@ant-design/cssinjs";
|
||
import { Button, ConfigProvider, theme, App as AntdApp } from "antd";
|
||
// import 'dayjs/locale/zh-cn';
|
||
import zhCN from "antd/locale/zh_CN";
|
||
|
||
import axios from "axios";
|
||
import { FC, useEffect, useState } from "react";
|
||
|
||
import $styles from "./app.module.css";
|
||
|
||
const getPosts = async () => {
|
||
let data: PostEntity[] = [];
|
||
try {
|
||
const res = await axios.get("/api/posts");
|
||
data = res.data;
|
||
} catch (err) {
|
||
console.log("Error:", err);
|
||
}
|
||
return data;
|
||
};
|
||
|
||
const App: FC = () => {
|
||
const [data, setData] = useState<PostEntity[]>([]);
|
||
useEffect(() => {
|
||
(async () => {
|
||
setData(await getPosts());
|
||
})();
|
||
}, []);
|
||
return (
|
||
<ConfigProvider
|
||
locale={zhCN}
|
||
theme={{
|
||
algorithm: theme.defaultAlgorithm,
|
||
token: {
|
||
colorPrimary: "#00B96B",
|
||
},
|
||
components: {
|
||
Layout: {
|
||
colorBgBody: "",
|
||
},
|
||
},
|
||
}}
|
||
>
|
||
<StyleProvider hashPriority="high">
|
||
<AntdApp>
|
||
<div className={$styles.app}>
|
||
<div className={$styles.container}>
|
||
欢迎来到3R教室，这是<span>React课程第一节</span>
|
||
<Button
|
||
type="primary"
|
||
className="!bg-lime-400 !text-emerald-900"
|
||
href="https://pincman.com/3r"
|
||
target="_blank"
|
||
>
|
||
点此打开
|
||
</Button>
|
||
<h2>文章列表</h2>
|
||
<ul>
|
||
{data.map((item) => (
|
||
<li key={item.id}>{item.title}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</AntdApp>
|
||
</StyleProvider>
|
||
</ConfigProvider>
|
||
);
|
||
};
|
||
export default App;
|