feat: [MarginFrontend] Fix linter & build

.gitignore

@@ -184,3 +184,6 @@ node_modules/
 .vscode 
 .cursor*
 .DS_Store
+
+#ignore build dist
+dist/

margin_frontend/components/HelloWorld.jsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+export default function HelloWorld({ name }) {
+	const [count, setCount] = useState(1);
+	return (
+		<div>
+			<h1>
+				Hello {name} x{count}!
+			</h1>
+			<button type="button" onClick={() => setCount((c) => c + 1)}>
+				Increment
+			</button>
+		</div>
+	);
+}

margin_frontend/components/PostsDemo.d.ts

@@ -0,0 +1 @@
+export default function PostsDemo(): string | import("react/jsx-runtime").JSX.Element;

margin_frontend/components/PostsDemo.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../src/api/api";
+function usePosts() {
+    return useQuery({
+        queryKey: ["posts"],
+        queryFn: async () => await api("posts").json(),
+    });
+}
+export default function PostsDemo() {
+    const { isFetching, error, data } = usePosts();
+    if (isFetching)
+        return "Loading...";
+    if (error)
+        return `An error has occurred: ${error.message}`;
+    return (_jsxs("div", { className: "bg-pageBg text-white p-10 flex flex-col gap-4", children: [_jsx("h1", { className: "text-xl", children: "Posts" }), data?.slice(0, 20).map((item) => (_jsxs("div", { className: "w-[40%]", children: [_jsx("h2", { className: "font-bold text-lg", children: item.title }), _jsx("p", { className: "text-gray-500", children: item.body })] }, item.id)))] }));
+}

margin_frontend/components/PostsDemo.tsx

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../src/api/api";
+
+interface PostData {
+	userId: number;
+	id: number;
+	title: string;
+	body: string;
+}
+
+function usePosts() {
+	return useQuery<PostData[]>({
+		queryKey: ["posts"],
+		queryFn: async () => await api("posts").json(),
+	});
+}
+
+export default function PostsDemo() {
+	const { isFetching, error, data } = usePosts();
+
+	if (isFetching) return "Loading...";
+
+	if (error) return `An error has occurred: ${error.message}`;
+	return (
+		<div className="bg-pageBg text-white p-10 flex flex-col gap-4">
+			<h1 className="text-xl">Posts</h1>
+			{data?.slice(0, 20).map((item: PostData) => (
+				<div key={item.id} className="w-[40%]">
+					<h2 className="font-bold text-lg">{item.title}</h2>
+					<p className="text-gray-500">{item.body}</p>
+				</div>
+			))}
+		</div>
+	);
+}