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

feat: add button to show collections containing the release on release page

Browse source 
feat: add release in list widget to release page
fix: redirecting if viewing not favorites collection for unauthorized user
This commit is contained in:
Kentai Radiquum 2024-08-18 14:40:59 +05:00
parent 723b620749
commit 501d3a1705
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 117 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

73
app/components/InfoLists/InfoLists.tsx Normal file
View file

@ -0,0 +1,73 @@
import { Card } from "flowbite-react";
export const InfoLists = (props: {
completed: number;
planned: number;
abandoned: number;
delayed: number;
watching: number;
total?: number;
}) => {
const total =
props.total ||
props.watching +
props.planned +
props.completed +
props.delayed +
props.abandoned;
return (
<Card className="w-full h-fit ">
<div
className="flex w-full h-8 overflow-hidden rounded-md"
style={
{
"--width-of-one": "5",
"--watching-percent": `calc(var(--width-of-one) * (${props.watching} / ${total} * 100%))`,
"--planned-percent": `calc(var(--width-of-one) * (${props.planned} / ${total} * 100%))`,
"--watched-percent": `calc(var(--width-of-one) * (${props.completed} / ${total} * 100%))`,
"--delayed-percent": `calc(var(--width-of-one) * (${props.delayed} / ${total} * 100%))`,
"--abandoned-percent": `calc(var(--width-of-one) * (${props.abandoned} / ${total} * 100%))`,
"--no-list-percent": `calc(var(--width-of-one) * (${
total -
(props.watching +
props.planned +
props.completed +
props.delayed +
props.abandoned)
} / ${total} * 100%))`,
} as React.CSSProperties
}
>
<div className={`bg-green-500 w-[var(--watching-percent)]`}></div>
<div className={`bg-purple-500 w-[var(--planned-percent)]`}></div>
<div className={`bg-blue-500 w-[var(--watched-percent)]`}></div>
<div className={`bg-yellow-300 w-[var(--delayed-percent)]`}></div>
<div className={`bg-red-500 w-[var(--abandoned-percent)]`}></div>
<div className={`bg-gray-400 w-[var(--no-list-percent)]`}></div>
</div>
<div className="flex flex-wrap w-full gap-4">
<p>
<span className="inline-block w-3 h-3 mr-2 bg-green-500 rounded-sm"></span>
Смотрю <span className="font-bold">{props.watching}</span>
</p>
<p>
<span className="inline-block w-3 h-3 mr-2 bg-purple-500 rounded-sm"></span>
В планах <span className="font-bold">{props.planned}</span>
</p>
<p>
<span className="inline-block w-3 h-3 mr-2 bg-blue-500 rounded-sm"></span>
Просмотрено <span className="font-bold">{props.completed}</span>
</p>
<p>
<span className="inline-block w-3 h-3 mr-2 bg-yellow-300 rounded-sm"></span>
Отложено <span className="font-bold">{props.delayed}</span>
</p>
<p>
<span className="inline-block w-3 h-3 mr-2 bg-red-500 rounded-sm"></span>
Брошено <span className="font-bold">{props.abandoned}</span>
</p>
</div>
</Card>
);
};