mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-07 00:34:41 +00:00
refactor: add Chip to cards
This commit is contained in:
parent
eb620c0b1d
commit
6406c17de9
GPG key ID:
858E8EE696525EED
2 changed files with 56 additions and 69 deletions
11
app/components/ReleaseLink/Chip.jsx
Normal file
11
app/components/ReleaseLink/Chip.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { sinceUnixDate } from "@/app/api/utils";
|
import { sinceUnixDate } from "@/app/api/utils";
|
||||||
|
import { Chip } from "./Chip";
|
||||||
|
|
||||||
export const ReleaseLink = (props) => {
|
export const ReleaseLink = (props) => {
|
||||||
const grade = props.grade.toFixed(1);
|
const grade = props.grade.toFixed(1);
|
||||||
|
|
@ -26,88 +27,63 @@ export const ReleaseLink = (props) => {
|
||||||
src={props.image}
|
src={props.image}
|
||||||
alt=""
|
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="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
|
||||||
<div className="flex gap-1 ">
|
<Chip
|
||||||
<div
|
bg_color={
|
||||||
className={`rounded-sm ${
|
grade == 0
|
||||||
grade == 0
|
? "hidden"
|
||||||
? "hidden"
|
: grade < 2
|
||||||
: grade < 2
|
? "bg-red-500"
|
||||||
? "bg-red-500"
|
: grade < 3
|
||||||
: grade < 3
|
? "bg-orange-500"
|
||||||
? "bg-orange-500"
|
: grade < 4
|
||||||
: grade < 4
|
? "bg-yellow-500"
|
||||||
? "bg-yellow-500"
|
: "bg-green-500"
|
||||||
: "bg-green-500"
|
}
|
||||||
}`}
|
name={grade}
|
||||||
>
|
/>
|
||||||
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">
|
|
||||||
{grade}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{user_list && (
|
{user_list && (
|
||||||
<div className={`rounded-sm ${user_list.bg_color}`}>
|
<Chip bg_color={user_list.bg_color} name={user_list.name} />
|
||||||
<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-wrap max-w-[45%] justify-end items-end gap-0.5 sm:gap-1 top-2 right-2">
|
|
||||||
{props.status ? (
|
{props.status ? (
|
||||||
<div className="bg-gray-500 rounded-sm">
|
<Chip name={props.status.name} />
|
||||||
<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>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="bg-gray-500 rounded-sm">
|
<Chip
|
||||||
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white text-center">
|
name={
|
||||||
{props.status_id == 1
|
props.status_id == 1
|
||||||
? "Завершено"
|
? "Завершено"
|
||||||
: props.status_id == 2
|
: 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 && (
|
{props.is_favorite && (
|
||||||
<div className="flex items-center justify-center bg-pink-500 rounded-sm">
|
<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>
|
<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>
|
||||||
)}
|
)}
|
||||||
{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>
|
</div>
|
||||||
<p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
|
<p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
|
||||||
{props.title_ru}
|
{props.title_ru}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue