mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-30 18:09:40 +05:00
chore: migrate to new flowbite-react
This commit is contained in:
parent
8daab3b3c1
commit
329448c9fc
GPG key ID:
858E8EE696525EED
32 changed files with 650 additions and 344 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Card, Table } from "flowbite-react";
|
||||
import { Card, Table, TableBody, TableCell, TableRow } from "flowbite-react";
|
||||
import { ReleaseInfoSearchLink } from "#/components/ReleaseInfo/ReleaseInfo.SearchLink";
|
||||
import { unixToDate, minutesToTime } from "#/api/utils";
|
||||
const weekDay = [
|
||||
|
|
@ -30,9 +30,9 @@ export const ReleaseInfoInfo = (props: {
|
|||
return (
|
||||
<Card>
|
||||
<Table>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell className="py-0">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="py-0">
|
||||
{props.country ?
|
||||
props.country.toLowerCase() == "япония" ?
|
||||
<span className="w-8 h-8 iconify-color twemoji--flag-for-japan"></span>
|
||||
|
|
@ -40,45 +40,45 @@ export const ReleaseInfoInfo = (props: {
|
|||
|
||||
: <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">
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{props.country && props.country}
|
||||
{(props.aired_on_date != 0 || props.year) && ", "}
|
||||
{props.season && props.season != 0 ?
|
||||
`${YearSeason[props.season]} `
|
||||
: ""}
|
||||
{props.year && `${props.year} г.`}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="py-0">
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-0">
|
||||
<span className="w-8 h-8 iconify-color mdi--animation-play-outline dark:invert"></span>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
</TableCell>
|
||||
<TableCell 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, "daysHours")}`}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="py-0">
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-0">
|
||||
<span className="w-8 h-8 iconify-color mdi--calendar-outline dark:invert"></span>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 dark:text-white">
|
||||
</TableCell>
|
||||
<TableCell 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">
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-0">
|
||||
<span className="w-8 h-8 iconify-color mdi--people-group-outline dark:invert"></span>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 dark:text-white">
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-gray-900 dark:text-white">
|
||||
{props.studio && (
|
||||
<>
|
||||
{"Студия: "}
|
||||
|
|
@ -117,13 +117,13 @@ export const ReleaseInfoInfo = (props: {
|
|||
/>
|
||||
</>
|
||||
)}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="py-0">
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-0">
|
||||
<span className="w-8 h-8 iconify-color mdi--tag-outline dark:invert"></span>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 dark:text-white">
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-gray-900 dark:text-white">
|
||||
{props.genres &&
|
||||
props.genres.split(", ").map((genre: string, index: number) => {
|
||||
return (
|
||||
|
|
@ -133,14 +133,14 @@ export const ReleaseInfoInfo = (props: {
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{props.status.toLowerCase() == "анонс" && (
|
||||
<Table.Row>
|
||||
<Table.Cell className="py-0">
|
||||
<TableRow>
|
||||
<TableCell className="py-0">
|
||||
<span className="w-8 h-8 iconify-color mdi--clock-outline dark:invert"></span>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{props.aired_on_date != 0 ?
|
||||
unixToDate(props.aired_on_date, "full")
|
||||
: props.year ?
|
||||
|
|
@ -151,10 +151,10 @@ export const ReleaseInfoInfo = (props: {
|
|||
{props.year && `${props.year} г.`}
|
||||
</>
|
||||
: "Скоро"}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</Table.Body>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
import {
|
||||
Card,
|
||||
Rating,
|
||||
Flowbite,
|
||||
Button,
|
||||
CustomFlowbiteTheme,
|
||||
Card,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
Rating,
|
||||
RatingAdvanced,
|
||||
RatingStar,
|
||||
RatingAdvancedTheme,
|
||||
} from "flowbite-react";
|
||||
import { numberDeclension } from "#/api/utils";
|
||||
import { useState } from "react";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
|
||||
const RatingTheme: CustomFlowbiteTheme = {
|
||||
ratingAdvanced: {
|
||||
progress: {
|
||||
base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
|
||||
},
|
||||
const CustomRatingTheme: RatingAdvancedTheme = {
|
||||
base: "flex items-center",
|
||||
label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
|
||||
progress: {
|
||||
base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
|
||||
fill: "h-5 rounded bg-yellow-400",
|
||||
label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
|
||||
},
|
||||
};
|
||||
export const ReleaseInfoRating = (props: {
|
||||
|
|
@ -39,7 +45,7 @@ export const ReleaseInfoRating = (props: {
|
|||
<Card>
|
||||
<div className="flex flex-col gap-2 sm:items-center sm:flex-row">
|
||||
<Rating>
|
||||
<Rating.Star />
|
||||
<RatingStar />
|
||||
<p className="ml-2 text-sm font-bold dark:text-white">
|
||||
{props.grade.toFixed(2)} из 5
|
||||
</p>
|
||||
|
|
@ -48,7 +54,7 @@ export const ReleaseInfoRating = (props: {
|
|||
<>
|
||||
<span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400 hidden lg:block" />
|
||||
<div className="flex items-center gap-2">
|
||||
{vote ? (
|
||||
{vote ?
|
||||
<>
|
||||
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
ваша оценка: {vote}
|
||||
|
|
@ -62,8 +68,7 @@ export const ReleaseInfoRating = (props: {
|
|||
изменить
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
: <Button
|
||||
size={"xs"}
|
||||
className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
|
||||
color="inline"
|
||||
|
|
@ -71,7 +76,7 @@ export const ReleaseInfoRating = (props: {
|
|||
>
|
||||
оценить
|
||||
</Button>
|
||||
)}
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -80,47 +85,50 @@ export const ReleaseInfoRating = (props: {
|
|||
{props.votes.total}{" "}
|
||||
{numberDeclension(props.votes.total, "голос", "голоса", "голосов")}
|
||||
</p>
|
||||
<Flowbite theme={{ theme: RatingTheme }}>
|
||||
<Rating.Advanced
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["5"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
5
|
||||
</Rating.Advanced>
|
||||
<Rating.Advanced
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["4"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
4
|
||||
</Rating.Advanced>
|
||||
<Rating.Advanced
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["3"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
3
|
||||
</Rating.Advanced>
|
||||
<Rating.Advanced
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["2"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
2
|
||||
</Rating.Advanced>
|
||||
<Rating.Advanced
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["1"] / props.votes.total) * 100
|
||||
)}
|
||||
>
|
||||
1
|
||||
</Rating.Advanced>
|
||||
</Flowbite>
|
||||
<RatingAdvanced
|
||||
theme={CustomRatingTheme}
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["5"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
5
|
||||
</RatingAdvanced>
|
||||
<RatingAdvanced
|
||||
theme={CustomRatingTheme}
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["4"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
4
|
||||
</RatingAdvanced>
|
||||
<RatingAdvanced
|
||||
theme={CustomRatingTheme}
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["3"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
3
|
||||
</RatingAdvanced>
|
||||
<RatingAdvanced
|
||||
theme={CustomRatingTheme}
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["2"] / props.votes.total) * 100
|
||||
)}
|
||||
className="mb-2"
|
||||
>
|
||||
2
|
||||
</RatingAdvanced>
|
||||
<RatingAdvanced
|
||||
theme={CustomRatingTheme}
|
||||
percentFilled={Math.floor(
|
||||
(props.votes["1"] / props.votes.total) * 100
|
||||
)}
|
||||
>
|
||||
1
|
||||
</RatingAdvanced>
|
||||
</Card>
|
||||
<ReleaseInfoRatingModal
|
||||
isOpen={isRatingModalOpen}
|
||||
|
|
@ -178,8 +186,8 @@ const ReleaseInfoRatingModal = (props: {
|
|||
show={props.isOpen}
|
||||
onClose={() => props.setIsOpen(false)}
|
||||
>
|
||||
<Modal.Header>Оценка</Modal.Header>
|
||||
<Modal.Body>
|
||||
<ModalHeader>Оценка</ModalHeader>
|
||||
<ModalBody>
|
||||
<div>
|
||||
<div className="block sm:hidden">
|
||||
<Rating size="md" className="justify-center">
|
||||
|
|
@ -191,7 +199,7 @@ const ReleaseInfoRatingModal = (props: {
|
|||
onMouseOut={() => setCurElement(0)}
|
||||
onClick={() => setVote(element)}
|
||||
>
|
||||
<Rating.Star
|
||||
<RatingStar
|
||||
filled={index + 1 <= curElement || index + 1 <= vote}
|
||||
/>
|
||||
</Button>
|
||||
|
|
@ -208,7 +216,7 @@ const ReleaseInfoRatingModal = (props: {
|
|||
onMouseOut={() => setCurElement(0)}
|
||||
onClick={() => setVote(element)}
|
||||
>
|
||||
<Rating.Star
|
||||
<RatingStar
|
||||
filled={index + 1 <= curElement || index + 1 <= vote}
|
||||
/>
|
||||
</Button>
|
||||
|
|
@ -216,8 +224,8 @@ const ReleaseInfoRatingModal = (props: {
|
|||
</Rating>
|
||||
</div>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div className="flex gap-1 ml-auto">
|
||||
<Button
|
||||
disabled={isSending}
|
||||
|
|
@ -241,7 +249,7 @@ const ReleaseInfoRatingModal = (props: {
|
|||
Оценить
|
||||
</Button>
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import useSWRInfinite from "swr/infinite";
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { tryCatchAPI, useSWRfetcher } from "#/api/utils";
|
||||
import { toast } from "react-toastify";
|
||||
import { useThemeMode } from "flowbite-react";
|
||||
import { DropdownItem, ModalHeader, useThemeMode } from "flowbite-react";
|
||||
|
||||
const lists = [
|
||||
{ list: 0, name: "Не смотрю" },
|
||||
|
|
@ -174,12 +174,12 @@ export const ReleaseInfoUserList = (props: {
|
|||
disabled={listEventDisabled}
|
||||
>
|
||||
{lists.map((list) => (
|
||||
<Dropdown.Item
|
||||
<DropdownItem
|
||||
key={list.list}
|
||||
onClick={() => _addToList(list.list)}
|
||||
>
|
||||
{list.name}
|
||||
</Dropdown.Item>
|
||||
</DropdownItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
<Button
|
||||
|
|
@ -321,7 +321,7 @@ const AddReleaseToCollectionModal = (props: {
|
|||
show={props.isOpen}
|
||||
onClose={() => props.setIsOpen(false)}
|
||||
>
|
||||
<Modal.Header>Выбор коллекции</Modal.Header>
|
||||
<ModalHeader>Выбор коллекции</ModalHeader>
|
||||
<div
|
||||
className="flex flex-col gap-2 p-4 overflow-y-auto"
|
||||
onScroll={handleScroll}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue