mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
feat: add collections page
This commit is contained in:
parent
dbe9eba23f
commit
9e843be11f
GPG key ID:
858E8EE696525EED
7 changed files with 338 additions and 0 deletions
10
app/collections/page.tsx
Normal file
10
app/collections/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { CollectionsPage } from "#/pages/Collections";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Коллекции",
|
||||||
|
description: "Просмотр и управление коллекциями",
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Collections() {
|
||||||
|
return <CollectionsPage />;
|
||||||
|
}
|
||||||
12
app/components/AddCollectionLink/AddCollectionLink.tsx
Normal file
12
app/components/AddCollectionLink/AddCollectionLink.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export const AddCollectionLink = (props: any) => {
|
||||||
|
return (
|
||||||
|
<Link href={`/collection/create`}>
|
||||||
|
<div className="flex flex-col items-center justify-center w-full gap-2 text-black transition-colors bg-gray-100 border hover:bg-gray-200 border-gray-50 hover:border-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-500 aspect-video group dark:bg-gray-600 dark:text-white">
|
||||||
|
<span className="w-8 h-8 iconify mdi--plus-circle dark:fill-white"></span>
|
||||||
|
<p>Новая коллекция</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
97
app/components/CollectionCourusel/CollectionCourusel.tsx
Normal file
97
app/components/CollectionCourusel/CollectionCourusel.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<section className={`${Styles.section}`}>
|
||||||
|
<div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
|
||||||
|
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
|
||||||
|
{props.sectionTitle}
|
||||||
|
</h1>
|
||||||
|
{props.showAllLink && (
|
||||||
|
<Link href={props.showAllLink}>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<p className="hidden text-xl font-bold sm:block">Показать все</p>
|
||||||
|
<span className="w-6 h-6 iconify mdi--arrow-right"></span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="m-4">
|
||||||
|
<div className="swiper">
|
||||||
|
<div className="swiper-wrapper">
|
||||||
|
{props.content.map((collection) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="swiper-slide"
|
||||||
|
key={collection.id}
|
||||||
|
style={{ width: "fit-content" }}
|
||||||
|
>
|
||||||
|
<div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
|
||||||
|
<CollectionLink {...collection} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{props.isMyCollections && (
|
||||||
|
<div className="swiper-slide" style={{ width: "fit-content" }}>
|
||||||
|
<div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
|
||||||
|
<AddCollectionLink />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`swiper-button-prev ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-left aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}
|
||||||
|
style={
|
||||||
|
{ "--swiper-navigation-size": "64px" } as React.CSSProperties
|
||||||
|
}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className={`swiper-button-next ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-right aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}
|
||||||
|
style={
|
||||||
|
{ "--swiper-navigation-size": "64px" } as React.CSSProperties
|
||||||
|
}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
95
app/components/CollectionLink/CollectionLink.tsx
Normal file
95
app/components/CollectionLink/CollectionLink.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<Link href={`/release/${props.id}`}>
|
||||||
|
<div className="w-full aspect-video group">
|
||||||
|
<div className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] " style={{
|
||||||
|
backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
|
||||||
|
}}>
|
||||||
|
<div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
|
||||||
|
<Chip
|
||||||
|
bg_color={
|
||||||
|
grade == 0
|
||||||
|
? "hidden"
|
||||||
|
: grade < 2
|
||||||
|
? "bg-red-500"
|
||||||
|
: grade < 3
|
||||||
|
? "bg-orange-500"
|
||||||
|
: grade < 4
|
||||||
|
? "bg-yellow-500"
|
||||||
|
: "bg-green-500"
|
||||||
|
}
|
||||||
|
name={grade}
|
||||||
|
/>
|
||||||
|
{user_list && (
|
||||||
|
<Chip bg_color={user_list.bg_color} name={user_list.name} />
|
||||||
|
)}
|
||||||
|
{props.status ? (
|
||||||
|
<Chip name={props.status.name} />
|
||||||
|
) : (
|
||||||
|
props.status_id != 0 && (
|
||||||
|
<Chip
|
||||||
|
name={
|
||||||
|
props.status_id == 1
|
||||||
|
? "Завершено"
|
||||||
|
: props.status_id == 2
|
||||||
|
? "Онгоинг"
|
||||||
|
: props.status_id == 3 && "Анонс"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<Chip
|
||||||
|
name={props.episodes_released && props.episodes_released}
|
||||||
|
name_2={
|
||||||
|
props.episodes_total ? props.episodes_total + " эп." : "? эп."
|
||||||
|
}
|
||||||
|
devider="/"
|
||||||
|
/>
|
||||||
|
{props.last_view_episode && (
|
||||||
|
<Chip
|
||||||
|
name={
|
||||||
|
props.last_view_episode.name
|
||||||
|
? props.last_view_episode.name
|
||||||
|
: `${props.last_view_episode.position + 1} серия`
|
||||||
|
}
|
||||||
|
name_2={
|
||||||
|
"last_view_timestamp" in props &&
|
||||||
|
sinceUnixDate(props.last_view_timestamp)
|
||||||
|
}
|
||||||
|
devider=", "
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{props.category && <Chip name={props.category.name} />}
|
||||||
|
{props.is_favorite && (
|
||||||
|
<div className="flex items-center justify-center bg-pink-500 rounded-sm">
|
||||||
|
<span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
|
||||||
|
{props.title_ru}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -56,6 +56,15 @@ export const Navbar = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
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",
|
icon: "material-symbols--history",
|
||||||
iconActive: "material-symbols--history",
|
iconActive: "material-symbols--history",
|
||||||
title: "История",
|
title: "История",
|
||||||
|
|
|
||||||
100
app/pages/Collections.tsx
Normal file
100
app/pages/Collections.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
|
||||||
|
<CollectionCourusel
|
||||||
|
sectionTitle="Мои коллекции"
|
||||||
|
// showAllLink="/bookmarks/watching"
|
||||||
|
content={[]}
|
||||||
|
isMyCollections={true}
|
||||||
|
/>
|
||||||
|
{/* {authState === "loading" &&
|
||||||
|
(!watchingData ||
|
||||||
|
!plannedData ||
|
||||||
|
!watchedData ||
|
||||||
|
!delayedData ||
|
||||||
|
!abandonedData) && (
|
||||||
|
<div className="flex items-center justify-center min-w-full min-h-screen">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
)} */}
|
||||||
|
{/* {watchingData &&
|
||||||
|
watchingData.content &&
|
||||||
|
watchingData.content.length > 0 && (
|
||||||
|
<ReleaseCourusel
|
||||||
|
sectionTitle="Смотрю"
|
||||||
|
showAllLink="/bookmarks/watching"
|
||||||
|
content={watchingData.content}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{plannedData && plannedData.content && plannedData.content.length > 0 && (
|
||||||
|
<ReleaseCourusel
|
||||||
|
sectionTitle="В планах"
|
||||||
|
showAllLink="/bookmarks/planned"
|
||||||
|
content={plannedData.content}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{watchedData && watchedData.content && watchedData.content.length > 0 && (
|
||||||
|
<ReleaseCourusel
|
||||||
|
sectionTitle="Просмотрено"
|
||||||
|
showAllLink="/bookmarks/watched"
|
||||||
|
content={watchedData.content}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{delayedData && delayedData.content && delayedData.content.length > 0 && (
|
||||||
|
<ReleaseCourusel
|
||||||
|
sectionTitle="Отложено"
|
||||||
|
showAllLink="/bookmarks/delayed"
|
||||||
|
content={delayedData.content}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{abandonedData &&
|
||||||
|
abandonedData.content &&
|
||||||
|
abandonedData.content.length > 0 && (
|
||||||
|
<ReleaseCourusel
|
||||||
|
sectionTitle="Заброшено"
|
||||||
|
showAllLink="/bookmarks/abandoned"
|
||||||
|
content={abandonedData.content}
|
||||||
|
/>
|
||||||
|
)} */}
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue