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

refactor: Profile release ratings

Browse source
This commit is contained in:
Kentai Radiquum 2025-03-26 01:57:20 +05:00
parent f6b8202877
commit ba5c149779
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 13 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
app/components/Profile/Profile.ReleaseRatings.tsx
View file

@ -17,6 +17,7 @@ import { useCallback, useEffect, useState } from "react";
import { ENDPOINTS } from "#/api/config"; import { ENDPOINTS } from "#/api/config";
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
import { Spinner } from "../Spinner/Spinner"; import { Spinner } from "../Spinner/Spinner";
import { Poster } from "../ReleasePoster/Poster";
const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = { const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
active: { active: {
@ -33,6 +34,9 @@ const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
}; };
const CarouselTheme = { const CarouselTheme = {
root: {
base: "relative h-full w-full max-w-[700px]",
},
indicators: CarouselIndicatorsTheme, indicators: CarouselIndicatorsTheme,
control: CarouselControlsTheme, control: CarouselControlsTheme,
}; };
@ -47,19 +51,15 @@ export const ProfileReleaseRatings = (props: any) => {
Посмотреть все Посмотреть все
</Button> </Button>
</div> </div>
<div className="max-w-[700px] min-h-[200px]"> <div className="flex min-h-[200px] items-center justify-center">
<Carousel theme={CarouselTheme}> <Carousel theme={CarouselTheme}>
{props.ratings.map((release) => { {props.ratings.map((release) => {
return ( return (
<Link href={`/release/${release.id}`} key={`vote-${release.id}`}> <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
<div className="flex gap-4 xl:mx-20"> <div className="flex gap-4 xl:mx-20">
<Image <div className="max-w-32">
src={release.image} <Poster image={release.image} />
width={100} </div>
height={125}
alt=""
className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
/>
<div className="flex flex-col gap-1 py-4"> <div className="flex flex-col gap-1 py-4">
<h2 className="text-lg">{release.title_ru}</h2> <h2 className="text-lg">{release.title_ru}</h2>
<Rating size="md"> <Rating size="md">
@ -155,7 +155,7 @@ const ProfileReleaseRatingsModal = (props: {
ref={modalRef} ref={modalRef}
> >
{isLoading && <Spinner />} {isLoading && <Spinner />}
{content && content.length > 0 ? ( {content && content.length > 0 ?
content.map((release) => { content.map((release) => {
return ( return (
<Link <Link
@ -163,13 +163,9 @@ const ProfileReleaseRatingsModal = (props: {
key={`vote-modal-${release.id}`} key={`vote-modal-${release.id}`}
> >
<div className="flex gap-4 xl:mx-20"> <div className="flex gap-4 xl:mx-20">
<Image <div className="flex-shrink-0 max-w-32">
src={release.image} <Poster image={release.image} />
width={100} </div>
height={125}
alt=""
className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
/>
<div className="flex flex-col gap-1 py-2"> <div className="flex flex-col gap-1 py-2">
<h2 className="text-lg">{release.title_ru}</h2> <h2 className="text-lg">{release.title_ru}</h2>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -200,9 +196,7 @@ const ProfileReleaseRatingsModal = (props: {
</Link> </Link>
); );
}) })
) : ( : <h1>Оценок нет</h1>}
<h1>Оценок нет</h1>
)}
</div> </div>
</Modal> </Modal>
); );