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

refactor: profile page recently watched

Browse source
This commit is contained in:
Kentai Radiquum 2025-03-26 01:08:59 +05:00
parent 1530fa3937
commit 967b9cfbb0
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 37 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/components/Profile/Profile.ReleaseHistory.tsx
View file

@ -1,25 +1,29 @@
import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
import { Card, Carousel } from "flowbite-react";
import type {
FlowbiteCarouselIndicatorsTheme,
FlowbiteCarouselControlTheme,
CustomFlowbiteTheme,
} from "flowbite-react";
import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
active: {
off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
on: "bg-gray-600 dark:bg-gray-200",
off: "bg-gray-400/50 hover:bg-gray-200",
on: "bg-gray-200",
},
base: "h-3 w-3 rounded-full",
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 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 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 = {
const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
root: {
base: "relative h-full w-full max-w-[375px]",
},
indicators: CarouselIndicatorsTheme,
control: CarouselControlsTheme,
};
@ -28,10 +32,16 @@ export const ProfileReleaseHistory = (props: any) => {
return (
<Card className="h-fit">
<h1 className="text-2xl font-bold">Недавно просмотренные</h1>
<div className="max-w-[700px] min-h-[200px]">
<div className="flex justify-center">
<Carousel theme={CarouselTheme}>
{props.history.map((release) => {
return <ReleaseLink key={`history-${release.id}`} {...release} />;
return (
<ReleaseLink
key={`history-${release.id}`}
{...release}
chipsSettings={{ lastWatchedHidden: false }}
/>
);
})}
</Carousel>
</div>

18
app/components/ReleaseInfo/ReleaseInfo.Related.tsx
View file

@ -1,13 +1,29 @@
"use client";
import { Card, Carousel, CustomFlowbiteTheme } from "flowbite-react";
import { Card, Carousel, CustomFlowbiteTheme, FlowbiteCarouselControlTheme, FlowbiteCarouselIndicatorsTheme } from "flowbite-react";
import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
import Link from "next/link";
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-[300px]",
},
indicators: CarouselIndicatorsTheme,
control: CarouselControlsTheme,
};
export const ReleaseInfoRelated = (props: {

10
app/components/ReleaseSection/ReleaseSection.tsx
View file

@ -31,16 +31,6 @@ export const ReleaseSection = (props: {
);
})}
</div>
{/* <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
{props.content.map((release) => {
return (
<div key={release.id} className="w-full h-full lg:aspect-video">
<ReleaseLink {...release} />
</div>
);
})}
{props.content.length == 1 && <div></div>}
</div> */}
</div>
</section>
);