mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-08 17:24:39 +00:00
feat: add search page
This commit is contained in:
parent
1915d46ffc
commit
751b61668f
GPG key ID:
858E8EE696525EED
5 changed files with 180 additions and 7 deletions
|
|
@ -29,12 +29,14 @@ export const ReleaseLink = (props) => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="absolute flex flex-col items-end gap-1 top-2 right-2">
|
||||
{props.status && (
|
||||
<div className="bg-gray-500 rounded-sm">
|
||||
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
|
||||
{props.status.name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-gray-500 rounded-sm">
|
||||
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
|
||||
{props.status.name}
|
||||
</p>
|
||||
</div>
|
||||
{props.status.name === "Выходит" && <div className="bg-gray-500 rounded-sm">
|
||||
<div className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white flex">
|
||||
{props.episodes_released && (
|
||||
<p>{`${props.episodes_released}/`}</p>
|
||||
|
|
@ -45,7 +47,7 @@ export const ReleaseLink = (props) => {
|
|||
<p>? эп.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
<p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
|
||||
{props.title_ru}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
"use client";
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
import { ReleaseSection } from "@/app/components/ReleaseSection/ReleaseSection";
|
||||
import { Spinner } from "@/app/components/Spinner/Spinner";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useScrollPosition } from "@/app/hooks/useScrollPosition";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const fetcher = async (url) => {
|
||||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) {
|
||||
const error = new Error("An error occurred while fetching the data.");
|
||||
error.info = await res.json();
|
||||
error.status = res.status;
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res.json();
|
||||
};
|
||||
|
||||
function Search() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [query, setQuery] = useState(searchParams.get("q") || null);
|
||||
|
||||
const getKey = (pageIndex, previousPageData) => {
|
||||
if (previousPageData && !previousPageData.content.length) return null;
|
||||
|
||||
const url = new URL("/api/search", window.location.origin);
|
||||
url.searchParams.set("page", pageIndex);
|
||||
|
||||
if (query) {
|
||||
url.searchParams.set("q", query);
|
||||
return url.toString();
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
const { data, error, isLoading, size, setSize } = useSWRInfinite(
|
||||
getKey,
|
||||
fetcher,
|
||||
{ initialSize: 2, revalidateFirstPage: false }
|
||||
);
|
||||
|
||||
const [content, setContent] = useState(null);
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
let allReleases = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
allReleases.push(...data[i].content);
|
||||
}
|
||||
setContent(allReleases);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const scrollPosition = useScrollPosition();
|
||||
useEffect(() => {
|
||||
if (scrollPosition >= 98 && scrollPosition <= 99) {
|
||||
setSize(size + 1);
|
||||
}
|
||||
}, [scrollPosition]);
|
||||
|
||||
if (error) return <div>failed to load</div>;
|
||||
|
||||
return (
|
||||
<main className="px-2 pt-2 pb-16 sm:pt-4 sm:pb-0">
|
||||
<div>
|
||||
<form
|
||||
className="max-w-md mx-auto"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
setQuery(e.target[0].value.trim());
|
||||
router.push(`/search?q=${e.target[0].value.trim()}`);
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="default-search"
|
||||
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
|
||||
>
|
||||
Search
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
|
||||
<svg
|
||||
className="w-4 h-4 text-gray-500 dark:text-gray-400"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
id="default-search"
|
||||
className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
placeholder="Поиск аниме..."
|
||||
required
|
||||
defaultValue={query || ""}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
{content ? (
|
||||
content.length > 0 ? (
|
||||
<ReleaseSection sectionTitle="Найденные релизы" content={content} />
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
|
||||
<span className="w-24 h-24 iconify-color twemoji--crying-cat"></span>
|
||||
<p>Странно, аниме не найдено, попробуйте другой запрос...</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
isLoading && (
|
||||
<div className="flex items-center justify-center min-w-full min-h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{!content && !isLoading && !query && (
|
||||
<div className="flex flex-col items-center justify-center min-w-full gap-2 mt-12 text-xl">
|
||||
<span className="w-16 h-16 iconify mdi--arrow-up animate-bounce"></span>
|
||||
<p>Введите ваш запрос что-бы найти любимый тайтл</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{data && data[data.length - 1].content.length == 25 && (
|
||||
<button
|
||||
className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
|
||||
onClick={() => setSize(size + 1)}
|
||||
>
|
||||
<span className="w-10 h-10 iconify mdi--plus"> </span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</button>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const SearchDynamic = dynamic(() => Promise.resolve(Search), { ssr: false });
|
||||
export default function SearchPage() {
|
||||
return <SearchDynamic />;
|
||||
}
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -18,6 +18,7 @@
|
|||
"devDependencies": {
|
||||
"@iconify-json/material-symbols": "^1.1.83",
|
||||
"@iconify-json/mdi": "^1.1.67",
|
||||
"@iconify-json/twemoji": "^1.1.15",
|
||||
"@iconify/tailwind": "^1.1.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.5",
|
||||
|
|
@ -147,6 +148,15 @@
|
|||
"@iconify/types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify-json/twemoji": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-json/twemoji/-/twemoji-1.1.15.tgz",
|
||||
"integrity": "sha512-ze2CAOwIWBKIP6ih6qMDItasVjRicktl2Qr3/ohZSMToAHm9z3Q6HCwE48eT0+D+uFpGBlNRQ22HHyE5izyhDg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/tailwind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/tailwind/-/tailwind-1.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"devDependencies": {
|
||||
"@iconify-json/material-symbols": "^1.1.83",
|
||||
"@iconify-json/mdi": "^1.1.67",
|
||||
"@iconify-json/twemoji": "^1.1.15",
|
||||
"@iconify/tailwind": "^1.1.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.5",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ module.exports = {
|
|||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
plugins: [
|
||||
addIconSelectors(["mdi", "material-symbols"]),
|
||||
addIconSelectors(["mdi", "material-symbols", "twemoji"]),
|
||||
require('tailwind-scrollbar')
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue