Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-30 18:09:40 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add logged in user favorite and owned collection fetching

Browse source
This commit is contained in:
Kentai Radiquum 2024-08-13 14:20:28 +05:00
parent 9f3e1b951a
commit b6878a0386
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 84 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

17
app/components/Chip/Chip.tsx
View file

@ -1,12 +1,25 @@
export const Chip = (props: {
icon_name?: string;
icon_color?: string;
name?: string;
name_2?: string;
devider?: string;
bg_color?: string;
}) => {
return (
<div className={`rounded-sm ${props.bg_color || "bg-gray-500"}`}>
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
<div
className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
props.bg_color || "bg-gray-500"
} ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
>
{props.icon_name && (
<span
className={`iconify w-6 h-6 ${props.icon_name} fill-${
props.icon_color || "white"
}`}
></span>
)}
<p className="text-xs text-white xl:text-base">
{props.name}
{props.name && props.devider ? props.devider : " "}
{props.name_2}

14
app/components/CollectionCourusel/CollectionCourusel.tsx
View file

@ -57,6 +57,13 @@ export const CollectionCourusel = (props: {
<div className="m-4">
<div className="swiper">
<div className="swiper-wrapper">
{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>
)}
{props.content.map((collection) => {
return (
<div
@ -70,13 +77,6 @@ export const CollectionCourusel = (props: {
</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`}

87
app/components/CollectionLink/CollectionLink.tsx
View file

@ -2,91 +2,32 @@ 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}`}>
<Link href={`/collection/${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={{
<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>
)}
{props.is_private && (
<div className="flex items-center justify-center bg-yellow-400 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--lock"></span>
</div>
)}
<Chip icon_name="material-symbols--favorite" name_2={props.favorites_count} />
<Chip icon_name="material-symbols--comment" name_2={props.comment_count} />
</div>
<p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
{props.title_ru}
{props.title}
</p>
</div>
</div>