aboutsummaryrefslogtreecommitdiff
path: root/pages/search.js
diff options
context:
space:
mode:
Diffstat (limited to 'pages/search.js')
-rw-r--r--pages/search.js110
1 files changed, 26 insertions, 84 deletions
diff --git a/pages/search.js b/pages/search.js
index e398e9e..99b12d7 100644
--- a/pages/search.js
+++ b/pages/search.js
@@ -62,16 +62,11 @@ const sorts = [
export default function Card() {
const router = useRouter();
- // const { genres } = router.query;
- // console.log(genres);
const { aniAdvanceSearch } = useAniList();
const [data, setData] = useState();
const [loading, setLoading] = useState(true);
- // const [selectedGenre, setSelectedGenre] = useState(null);
- // const [selectedType, setSelectedType] = useState(type[0]);
- // const [selectedSort, setSelectedSort] = useState(null);
const { hasil } = router.query;
@@ -85,7 +80,6 @@ export default function Card() {
const [isVisible, setIsVisible] = useState(false);
- // const [query, setQuery] = useState(hasil || null);
const inputRef = useRef(null);
async function advance() {
@@ -107,32 +101,15 @@ export default function Card() {
advance();
}, [search, type, seasonYear, season, genres, perPage, sort]);
- // useEffect(() => {
- // async function fetchData() {
- // setLoading(true);
- // try {
- // const res = await fetch(
- // `https://api.moopa.my.id/meta/anilist/advanced-search?${
- // query ? `query=${query}&` : ""
- // }${selectedGenre ? `genres=["${selectedGenre}"]&` : ""}${
- // selectedType ? `type=${selectedType}&` : ""
- // }${selectedSort ? `sort=["${selectedSort}"]` : ""}`
- // );
- // const data = await res.json();
- // setData(data);
- // setLoading(false);
- // } catch (e) {
- // console.error(e);
- // }
- // }
- // fetchData();
- // }, [query, selectedGenre, selectedType, selectedSort]);
-
const handleKeyDown = async (event) => {
if (event.key === "Enter") {
event.preventDefault();
const inputValue = event.target.value;
- setQuery(inputValue);
+ if (inputValue === "") {
+ setQuery(null);
+ } else {
+ setQuery(inputValue);
+ }
}
};
@@ -193,7 +170,7 @@ export default function Card() {
className="w-[297px] h-[46px] bg-secondary rounded-[10px] flex items-center text-center"
onChange={(e) => setSelectedSort(e.target.value)}
>
- <option value="">Sort By</option>
+ <option value={["POPULARITY_DESC"]}>Sort By</option>
{sorts.map((option) => (
<option key={option} value={option}>
{option}
@@ -277,7 +254,7 @@ export default function Card() {
TYPE
</h1>
<select
- className="w-[195px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
+ className="w-[195px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
value={type}
onChange={(e) => setSelectedType(e.target.value)}
>
@@ -294,11 +271,11 @@ export default function Card() {
SORT
</h1>
<select
- className="w-[195px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
+ className="w-[195px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
onChange={(e) => setSelectedSort(e.target.value)}
>
- <option value="">Sort By</option>
- {sort.map((option) => (
+ <option value={["POPULARITY_DESC"]}>Sort By</option>
+ {sorts.map((option) => (
<option key={option} value={option}>
{option}
</option>
@@ -317,55 +294,16 @@ export default function Card() {
{loading ? (
<>
<SkeletonTheme baseColor="#3B3C41" highlightColor="#4D4E52">
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
+ {[1, 2, 4, 5, 6, 7, 8].map((item) => (
+ <div
+ key={item}
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ ))}
</SkeletonTheme>
</>
) : data && data.media.length === 0 ? (
@@ -390,7 +328,6 @@ export default function Card() {
className=""
>
<div
- // className=" bg-[#3B3C41] h-[313px] hover:ring-4 ring-[#ff8a57] transition-all cursor-pointer duration-100 ease-in-out rounded-[10px]"
className=" bg-[#3B3C41] lg:h-[313px] xs:h-[215px] h-[175px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]"
style={{
backgroundImage: `url(${anime.coverImage.extraLarge})`,
@@ -400,7 +337,12 @@ export default function Card() {
/>
</Link>
<Link href={`/anime/${anime.id}`}>
- <h1 className="font-outfit font-bold lg:text-[20px] pt-4 title-overflow">
+ <h1 className="font-outfit font-bold lg:text-[20px] pt-4 line-clamp-2">
+ {anime.status === "RELEASING" ? (
+ <span className="dots bg-green-500" />
+ ) : anime.status === "NOT_YET_RELEASED" ? (
+ <span className="dots bg-red-500" />
+ ) : null}
{anime.title.userPreferred}
</h1>
</Link>
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-11 04:46:33 +0000