From 1fcdd9f7d859b925bf92265f441655d5522e351c Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Tue, 11 Apr 2023 23:23:29 +0700
Subject: initial commit

---
 components/hero/searchAni.js | 64 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 components/hero/searchAni.js

(limited to 'components/hero/searchAni.js')

diff --git a/components/hero/searchAni.js b/components/hero/searchAni.js
new file mode 100644
index 0000000..390165a
--- /dev/null
+++ b/components/hero/searchAni.js
@@ -0,0 +1,64 @@
+import React from "react";
+import { useQuery, gql } from "@apollo/client";
+import Link from "next/link";
+
+const SearchAni = ({ searchQuery }) => {
+  const ANIME_QUERY = gql`
+    query (
+      $id: Int
+      $page: Int
+      $perPage: Int
+      $search: String
+      $sort: [MediaSort]
+    ) {
+      Page(page: $page, perPage: $perPage) {
+        pageInfo {
+          total
+          currentPage
+          lastPage
+          hasNextPage
+          perPage
+        }
+        media(id: $id, search: $search, sort: $sort, type: ANIME) {
+          id
+          idMal
+          title {
+            romaji
+            english
+          }
+          coverImage {
+            large
+          }
+        }
+      }
+    }
+  `;
+
+  // use useQuery hook to execute query and get data
+  const { loading, error, data } = useQuery(ANIME_QUERY, {
+    variables: {
+      search: searchQuery,
+      page: 1,
+      perPage: 5,
+      sort: "TRENDING_DESC",
+    },
+  });
+
+  // render component
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :(</p>;
+
+  const { media } = data.Page;
+
+  // const cleanDescription = description.replace(/<br>/g, '').replace(/\n/g, '  ');
+
+  return (
+    <main className="flex flex-col">
+      <div className="my-10 mx-[1rem] flex flex-col gap-10 md:mx-auto md:w-full">
+        {media.map((anime) => {})}
+      </div>
+    </main>
+  );
+};
+
+export default SearchAni;
-- 
cgit v1.2.3