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

refactor: Release page

Browse source 
factor it in separate components and update grid styling
This commit is contained in:
Kentai Radiquum 2024-07-31 20:21:32 +05:00
parent c2c3a95e6c
commit e548ce060d
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
9 changed files with 542 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

154
app/components/ReleaseInfo/ReleaseInfo.Info.tsx Normal file
View file

@ -0,0 +1,154 @@
import { Card, Table } from "flowbite-react";
import { ReleaseInfoSearchLink } from "#/components/ReleaseInfo/ReleaseInfo.SearchLink";
import { unixToDate, getSeasonFromUnix, minutesToTime } from "#/api/utils";
const weekDay = [
"_",
"каждый понедельник",
"каждый вторник",
"каждую среду",
"каждый четверг",
"каждую пятницу",
"каждую субботу",
"каждое воскресенье",
];
const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
export const ReleaseInfoInfo = (props: {
country: string | null;
aired_on_date: number | null;
year: number | null;
episodes: { total: number | null; released: number | null };
season: number;
status: string;
duration: number;
category: string;
broadcast: number;
studio: string | null;
author: string | null;
director: string | null;
genres: string;
}) => {
return (
<Card>
<Table>
<Table.Body>
<Table.Row>
<Table.Cell className="py-0">
{props.country ? (
props.country.toLowerCase() == "япония" ? (
<span className="w-8 h-8 iconify-color twemoji--flag-for-japan"></span>
) : (
<span className="w-8 h-8 iconify-color twemoji--flag-for-china"></span>
)
) : (
<span className="w-8 h-8 iconify-color twemoji--flag-for-united-nations "></span>
)}
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.country && props.country}
{(props.aired_on_date != 0 || props.year) && ", "}
{props.aired_on_date != 0 &&
`${getSeasonFromUnix(props.aired_on_date)} `}
{props.year && `${props.year} г.`}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--animation-play-outline "></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.episodes.released ? props.episodes.released : "?"}
{"/"}
{props.episodes.total ? props.episodes.total + " эп. " : "? эп. "}
{props.duration != 0 && `по ${minutesToTime(props.duration)}`}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--calendar-outline "></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.category}
{", "}
{props.broadcast == 0
? props.status.toLowerCase()
: `выходит ${weekDay[props.broadcast]}`}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--people-group-outline "></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.studio && (
<>
{"Студия: "}
{props.studio
.split(", ")
.map((studio: string, index: number) => {
return (
<div key={index} className="inline">
{index > 0 && ", "}
<ReleaseInfoSearchLink title={studio} searchBy={1} />
</div>
);
})}
{(props.author || props.director) && ", "}
</>
)}
{props.author && (
<>
{"Автор: "}
<ReleaseInfoSearchLink title={props.author} searchBy={3} />
{props.director && ", "}
</>
)}
{props.director && (
<>
{"Режиссёр: "}
<ReleaseInfoSearchLink title={props.director} searchBy={2} />
</>
)}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--tag-outline "></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.genres &&
props.genres.split(", ").map((genre: string, index: number) => {
return (
<div key={index} className="inline">
{index > 0 && ", "}
<ReleaseInfoSearchLink title={genre} searchBy={4} />
</div>
);
})}
</Table.Cell>
</Table.Row>
{props.status.toLowerCase() == "анонс" && (
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--clock-outline "></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.aired_on_date != 0 ? (
unixToDate(props.aired_on_date)
) : props.year ? (
<>
{props.season && props.season != 0
? `${YearSeason[props.season]} `
: ""}
{props.year && `${props.year} г.`}
</>
) : (
"Скоро"
)}
</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
</Card>
);
};