feat: add release user list and release user favorite to the ReleaseLink on Index and Index Category pages

This commit is contained in:
Kentai Radiquum 2024-07-14 14:35:02 +05:00
parent c4a9b4f91a
commit 35c79559ab
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 68 additions and 22 deletions

View file

@ -2,6 +2,20 @@ import Link from "next/link";
export const ReleaseLink = (props) => {
const grade = props.grade.toFixed(1);
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" },
};
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">
@ -11,22 +25,38 @@ export const ReleaseLink = (props) => {
src={props.image}
alt=""
/>
<div
className={`absolute left-2 top-2 rounded-sm ${
grade == 0
? "hidden"
: grade < 2
? "bg-red-500"
: grade < 3
? "bg-orange-500"
: grade < 4
? "bg-yellow-500"
: "bg-green-500"
}`}
>
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
{grade}
</p>
<div className="absolute flex flex-col items-start justify-start gap-1 left-2 top-2">
<div className="flex gap-1 ">
<div
className={`rounded-sm ${
grade == 0
? "hidden"
: grade < 2
? "bg-red-500"
: grade < 3
? "bg-orange-500"
: grade < 4
? "bg-yellow-500"
: "bg-green-500"
}`}
>
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
{grade}
</p>
</div>
{props.is_favorite && (
<div className="flex items-center justify-center bg-pink-500 rounded-sm">
<span className="w-6 h-full bg-white sm:w-8 sm:h-8 iconify mdi--heart"></span>
</div>
)}
</div>
{user_list && (
<div className={`rounded-sm ${user_list.bg_color}`}>
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
{user_list.name}
</p>
</div>
)}
</div>
<div className="absolute flex flex-col items-end gap-1 top-2 right-2">
{props.status ? (