1 files changed, 61 insertions, 0 deletions
diff --git a/pages/components/manga/chapters.js b/pages/components/manga/chapters.js
new file mode 100644
index 0000000..7997a73
--- /dev/null
+++ b/pages/components/manga/chapters.js
@@ -0,0 +1,61 @@
+import axios from "axios";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+
+export default function Content({ ids, providers }) {
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  async function fetchData() {
+    setIsLoading(true);
+    try {
+      const res = await axios.get(
+        `https://api.eucrypt.my.id/meta/anilist-manga/info/${ids}?provider=${providers}`
+      );
+      const data = res.data;
+      setData(data);
+      setError(null); // Reset error state if data is successfully fetched
+    } catch (error) {
+      setError(error);
+    }
+
+    setIsLoading(false);
+  }
+  useEffect(() => {
+    fetchData();
+  }, [providers]);
+  useEffect(() => {
+    // console.log("Data changed:", data);
+  }, [data]);
+
+  if (error) {
+    // Handle 404 Not Found error
+    return <div>Chapters Not Available</div>;
+  }
+  //   console.log(isLoading);
+  return (
+    <>
+      <div className="flex h-[540px] flex-col gap-5 overflow-y-scroll">
+        {isLoading ? (
+          <p>Loading...</p>
+        ) : data.chapters?.length > 0 ? (
+          data.chapters?.map((chapter, index) => {
+            return (
+              <div key={index}>
+                <Link
+                  href={`/manga/chapter/[chapter]`}
+                  as={`/manga/chapter/read?id=${chapter.id}&provider=${providers}`}
+                >
+                  Chapters {index + 1}
+                </Link>
+              </div>
+            );
+          })
+        ) : (
+          <p>No Chapters Available</p>
+        )}
+      </div>
+    </>
+  );
+}