mirror of
https://github.com/Radiquum/AniX.git
synced 2025-05-30 08:39:36 +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
app/components/ReleaseInfo
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue