diff --git a/app/collections/page.tsx b/app/collections/page.tsx new file mode 100644 index 0000000..cd68b69 --- /dev/null +++ b/app/collections/page.tsx @@ -0,0 +1,10 @@ +import { CollectionsPage } from "#/pages/Collections"; + +export const metadata = { + title: "Коллекции", + description: "Просмотр и управление коллекциями", +} + +export default function Collections() { + return ; +} diff --git a/app/components/AddCollectionLink/AddCollectionLink.tsx b/app/components/AddCollectionLink/AddCollectionLink.tsx new file mode 100644 index 0000000..cab05fc --- /dev/null +++ b/app/components/AddCollectionLink/AddCollectionLink.tsx @@ -0,0 +1,12 @@ +import Link from "next/link"; + +export const AddCollectionLink = (props: any) => { + return ( + +
+ +

Новая коллекция

+
+ + ); +}; diff --git a/app/components/CollectionCourusel/CollectionCourusel.module.css b/app/components/CollectionCourusel/CollectionCourusel.module.css new file mode 100644 index 0000000..fce52de --- /dev/null +++ b/app/components/CollectionCourusel/CollectionCourusel.module.css @@ -0,0 +1,15 @@ +.swiper-button:global(.swiper-button-disabled) { + opacity: 0 !important; +} + +.section .swiper-button { + display: none !important; +} + +@media (hover: hover) { + .section:hover .swiper-button { + display: flex !important; + width: 64px; + height: 64px; + } +} diff --git a/app/components/CollectionCourusel/CollectionCourusel.tsx b/app/components/CollectionCourusel/CollectionCourusel.tsx new file mode 100644 index 0000000..8f1651d --- /dev/null +++ b/app/components/CollectionCourusel/CollectionCourusel.tsx @@ -0,0 +1,97 @@ +"use client"; +import { useEffect } from "react"; +import { CollectionLink } from "../CollectionLink/CollectionLink"; +import { AddCollectionLink } from "../AddCollectionLink/AddCollectionLink"; +import Link from "next/link"; + +import Styles from "./CollectionCourusel.module.css"; +import Swiper from "swiper"; +import "swiper/css"; +import "swiper/css/navigation"; +import { Navigation } from "swiper/modules"; + +export const CollectionCourusel = (props: { + sectionTitle: string; + showAllLink?: string; + content: any; + isMyCollections?: boolean; +}) => { + useEffect(() => { + const options: any = { + direction: "horizontal", + spaceBetween: 8, + allowTouchMove: true, + slidesPerView: "auto", + navigation: { + enabled: false, + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + breakpoints: { + 450: { + navigation: { + enabled: true, + }, + }, + }, + modules: [Navigation], + }; + new Swiper(".swiper", options); + }, []); + + return ( +
+
+

+ {props.sectionTitle} +

+ {props.showAllLink && ( + +
+

Показать все

+ +
+ + )} +
+
+
+
+ {props.content.map((collection) => { + return ( +
+
+ +
+
+ ); + })} + {props.isMyCollections && ( +
+
+ +
+
+ )} +
+
+
+
+
+
+ ); +}; diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx new file mode 100644 index 0000000..0c51ab3 --- /dev/null +++ b/app/components/CollectionLink/CollectionLink.tsx @@ -0,0 +1,95 @@ +import Link from "next/link"; +import { sinceUnixDate } from "#/api/utils"; +import { Chip } from "#/components/Chip/Chip"; + +const profile_lists = { + // 0: "Не смотрю", + 1: { name: "Смотрю", bg_color: "bg-green-500" }, + 2: { name: "В планах", bg_color: "bg-purple-500" }, + 3: { name: "Просмотрено", bg_color: "bg-blue-500" }, + 4: { name: "Отложено", bg_color: "bg-yellow-500" }, + 5: { name: "Брошено", bg_color: "bg-red-500" }, +}; + +export const CollectionLink = (props: any) => { + const grade = props.grade.toFixed(1); + const profile_list_status = props.profile_list_status; + let user_list = null; + if (profile_list_status != null || profile_list_status != 0) { + user_list = profile_lists[profile_list_status]; + } + return ( + +
+
+
+ + {user_list && ( + + )} + {props.status ? ( + + ) : ( + props.status_id != 0 && ( + + ) + )} + + {props.last_view_episode && ( + + )} + {props.category && } + {props.is_favorite && ( +
+ +
+ )} +
+

+ {props.title_ru} +

+
+
+ + ); +}; diff --git a/app/components/Navbar/Navbar.tsx b/app/components/Navbar/Navbar.tsx index 2a4b9c1..9dbce8a 100644 --- a/app/components/Navbar/Navbar.tsx +++ b/app/components/Navbar/Navbar.tsx @@ -56,6 +56,15 @@ export const Navbar = () => { }, { id: 5, + icon: "material-symbols--collections-bookmark-outline", + iconActive: "material-symbols--collections-bookmark", + title: "Коллекции", + href: "/collections", + withAuthOnly: true, + mobileMenu: true, + }, + { + id: 6, icon: "material-symbols--history", iconActive: "material-symbols--history", title: "История", diff --git a/app/pages/Collections.tsx b/app/pages/Collections.tsx new file mode 100644 index 0000000..0e85376 --- /dev/null +++ b/app/pages/Collections.tsx @@ -0,0 +1,100 @@ +"use client"; +import useSWR from "swr"; +import { CollectionCourusel } from "#/components/CollectionCourusel/CollectionCourusel"; +import { Spinner } from "#/components/Spinner/Spinner"; +const fetcher = (...args: any) => + fetch([...args] as any).then((res) => res.json()); +import { useUserStore } from "#/store/auth"; +import { BookmarksList } from "#/api/utils"; +import { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; + +export function CollectionsPage() { + const token = useUserStore((state) => state.token); + const authState = useUserStore((state) => state.state); + const router = useRouter(); + + // function useFetchReleases(listName: string) { + // let url: string; + + // if (token) { + // url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?token=${token}`; + // } + + // const { data } = useSWR(url, fetcher); + // return [data]; + // } + + // const [watchingData] = useFetchReleases("watching"); + // const [plannedData] = useFetchReleases("planned"); + // const [watchedData] = useFetchReleases("watched"); + // const [delayedData] = useFetchReleases("delayed"); + // const [abandonedData] = useFetchReleases("abandoned"); + + useEffect(() => { + if (authState === "finished" && !token) { + router.push("/login?redirect=/collections"); + } + }, [authState, token]); + + return ( +
+ + {/* {authState === "loading" && + (!watchingData || + !plannedData || + !watchedData || + !delayedData || + !abandonedData) && ( +
+ +
+ )} */} + {/* {watchingData && + watchingData.content && + watchingData.content.length > 0 && ( + + )} + {plannedData && plannedData.content && plannedData.content.length > 0 && ( + + )} + {watchedData && watchedData.content && watchedData.content.length > 0 && ( + + )} + {delayedData && delayedData.content && delayedData.content.length > 0 && ( + + )} + {abandonedData && + abandonedData.content && + abandonedData.content.length > 0 && ( + + )} */} +
+ ); +}