mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 15:54:39 +00:00
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { Card, Carousel } from "flowbite-react";
|
||
import type {
|
||
FlowbiteCarouselIndicatorsTheme,
|
||
FlowbiteCarouselControlTheme,
|
||
CustomFlowbiteTheme,
|
||
} from "flowbite-react";
|
||
import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
|
||
|
||
const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
|
||
active: {
|
||
off: "bg-gray-400/50 hover:bg-gray-200",
|
||
on: "bg-gray-200",
|
||
},
|
||
base: "h-3 w-3 rounded-full max-w-[300px]",
|
||
wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
|
||
};
|
||
|
||
const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
|
||
base: "inline-flex h-8 w-8 items-center justify-center rounded-full group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
|
||
icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
|
||
};
|
||
|
||
const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
|
||
root: {
|
||
base: "relative h-full w-full max-w-[375px]",
|
||
},
|
||
indicators: CarouselIndicatorsTheme,
|
||
control: CarouselControlsTheme,
|
||
};
|
||
|
||
export const ProfileReleaseHistory = (props: any) => {
|
||
return (
|
||
<Card className="h-fit">
|
||
<h1 className="text-2xl font-bold">Недавно просмотренные</h1>
|
||
<div className="flex justify-center">
|
||
<Carousel theme={CarouselTheme}>
|
||
{props.history.map((release) => {
|
||
return (
|
||
<ReleaseLink
|
||
key={`history-${release.id}`}
|
||
{...release}
|
||
chipsSettings={{ lastWatchedHidden: false }}
|
||
/>
|
||
);
|
||
})}
|
||
</Carousel>
|
||
</div>
|
||
</Card>
|
||
);
|
||
};
|