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

feat: add recently watched widget

Browse source
This commit is contained in:
Kentai Radiquum 2024-08-25 17:45:52 +05:00
parent 7a0b71020f
commit 6aa6424508
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 93 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,11 @@
import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
import type { FlowbiteCarouselIndicatorsTheme, FlowbiteCarouselControlTheme } from "flowbite-react";
import type {
FlowbiteCarouselIndicatorsTheme,
FlowbiteCarouselControlTheme,
} from "flowbite-react";
import Image from "next/image";
import { unixToDate } from "#/api/utils";
import Link from "next/link";
const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
active: {
@ -13,14 +17,14 @@ const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
};
const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
"base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
"icon": "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6"
}
base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
};
const CarouselTheme = {
indicators: CarouselIndicatorsTheme,
control: CarouselControlsTheme
}
indicators: CarouselIndicatorsTheme,
control: CarouselControlsTheme,
};
export const ProfileReleaseRatings = (props: any) => {
return (
@ -30,31 +34,30 @@ export const ProfileReleaseRatings = (props: any) => {
<Carousel theme={CarouselTheme}>
{props.ratings.map((release) => {
return (
<div
className="flex gap-4 mx-20"
key={`vote-${release.id}`}
>
<Image
src={release.image}
width={100}
height={150}
alt=""
className="border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800"
/>
<div className="py-4 flex flex-col gap-1">
<h2 className="text-lg">{release.title_ru}</h2>
<Rating size="md">
<RatingStar filled={release.my_vote >= 1} />
<RatingStar filled={release.my_vote >= 2} />
<RatingStar filled={release.my_vote >= 3} />
<RatingStar filled={release.my_vote >= 4} />
<RatingStar filled={release.my_vote >= 5} />
</Rating>
<h2 className="text-md text-gray-500 dark:text-gray-400">
{unixToDate(release.voted_at, "full")}
</h2>
<Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
<div className="flex gap-4 xl:mx-20">
<Image
src={release.image}
width={100}
height={150}
alt=""
className="border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800"
/>
<div className="py-4 flex flex-col gap-1">
<h2 className="text-lg">{release.title_ru}</h2>
<Rating size="md">
<RatingStar filled={release.my_vote >= 1} />
<RatingStar filled={release.my_vote >= 2} />
<RatingStar filled={release.my_vote >= 3} />
<RatingStar filled={release.my_vote >= 4} />
<RatingStar filled={release.my_vote >= 5} />
</Rating>
<h2 className="text-md text-gray-500 dark:text-gray-400">
{unixToDate(release.voted_at, "full")}
</h2>
</div>
</div>
</div>
</Link>
);
})}
</Carousel>