Merge pull request from /feature/api-exemplo

Feature/api exemplo

package.json

@@ -12,16 +12,17 @@
     "start": "json-server-auth --watch src/services/db.json --host 0.0.0.0 --port 3004"
   },
   "dependencies": {
-    "axios": "^1.6.3",
+    "@tanstack/react-query": "^5.17.1",
+    "axios": "^1.6.4",
     "json-server": "^0.16.3",
     "json-server-auth": "^2.1.0",
-    "lucide-react": "^0.303.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
     "swr": "^2.2.4"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.17.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

src/App.tsx

@@ -1,15 +1,20 @@
-import MainHeader from "./components/MainHeader";
+import { Outlet } from "react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import "./App.scss";
 
-import { Outlet } from "react-router";
+import MainHeader from "./components/MainHeader";
 import Footer from "./components/Footer";
 
 function App() {
+  const queryClient = new QueryClient();
   return (
     <>
-      <MainHeader />
-      <Outlet />
-      <Footer />
+      <QueryClientProvider client={queryClient}>
+        <MainHeader />
+        <Outlet />
+        <Footer />
+      </QueryClientProvider>
     </>
   );
 }

src/components/ModulosEducacionais_small.tsx

@@ -1,7 +1,39 @@
-function ModulosEducacionais_small() {
+import { useQuery } from "@tanstack/react-query";
+
+import ApiAvasus from "../services/ApiAvasus";
+
+export default function ModulosEducacionais_small() {
+  let page = 1;
+  let limit = 3;
+  const { data, isLoading }: any = useQuery({
+    queryFn: () =>
+      ApiAvasus(`http://0.0.0.0:3004/cursos?_page=${page}&_limit=${limit}`),
+    queryKey: ["modulosSmall"],
+  });
+
+  if (isLoading) {
+    return <h1>Loading...</h1>;
+  }
+
   return (
-    <div>ModulosEducacionais_small</div>
-  )
+    <>
+      <h2>ModulosEducacionais_small</h2>
+      <div>
+        <div>Mais populares</div>
+        {/* Conteúdo paginado */}
+        <div>
+          <ol id="modulos-lista"></ol>
+          {data?.map((data: any) => {
+            return (
+              <li key={data.id}>
+                <img src={data.capa} />
+                {data.id}
+              </li>
+            );
+          })}
+        </div>
+      </div>
+      <span>Ver mais</span>
+    </>
+  );
 }
-
-export default ModulosEducacionais_small

src/services/ApiAvasus.ts

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export default function ApiAvasus(url: string) {
+  return axios.get(url).then((response) => response.data);
+}