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

refactor: add Chip to cards

Browse source
This commit is contained in:
Kentai Radiquum 2024-07-19 04:16:02 +05:00
parent eb620c0b1d
commit 6406c17de9
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 56 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/components/ReleaseLink/Chip.jsx Normal file
View file

@ -0,0 +1,11 @@
export const Chip = (props) => {
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">
{props.name}
{props.name && props.devider ? props.devider : " "}
{props.name_2}
</p>
</div>
);
};

114
app/components/ReleaseLink/ReleaseLink.jsx
View file

@ -1,5 +1,6 @@
import Link from "next/link";
import { sinceUnixDate } from "@/app/api/utils";
import { Chip } from "./Chip";
export const ReleaseLink = (props) => {
const grade = props.grade.toFixed(1);
@ -26,88 +27,63 @@ export const ReleaseLink = (props) => {
src={props.image}
alt=""
/>
<div className="absolute flex flex-wrap items-start justify-start max-w-[45%] gap-0.5 sm: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 sm:text-base text-white">
{grade}
</p>
</div>
</div>
<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 && (
<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>
<Chip bg_color={user_list.bg_color} name={user_list.name} />
)}
</div>
<div className="absolute flex flex-wrap max-w-[45%] justify-end items-end gap-0.5 sm: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 text-center">
{props.status.name}
</p>
</div>
<Chip name={props.status.name} />
) : (
<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 text-center">
{props.status_id == 1
<Chip
name={
props.status_id == 1
? "Завершено"
: props.status_id == 2
? "Онгоинг"
: "Анонс"}
</p>
</div>
: "Анонс"
}
/>
)}
<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=", "
/>
)}
<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>
)}
{props.episodes_total ? (
<p>{props.episodes_total} эп.</p>
) : (
<p>? эп.</p>
)}
</div>
</div>
{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.last_view_episode && (
<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.last_view_episode.name ? (
<p>{`${props.last_view_episode.name}`} </p>
) : (
<p>{`${props.last_view_episode.position + 1} серия`}</p>
)}
</div>
</div>
)}
{"last_view_timestamp" in props &&
props.last_view_timestamp != 0 && (
<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">
<p>{sinceUnixDate(props.last_view_timestamp)}</p>
</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}