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

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

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

@ -1,13 +1,29 @@
"use client"; "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 { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
import Link from "next/link"; 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"] = { const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
root: { root: {
base: "relative h-full w-full max-w-[300px]", base: "relative h-full w-full max-w-[300px]",
}, },
indicators: CarouselIndicatorsTheme,
control: CarouselControlsTheme,
}; };
export const ReleaseInfoRelated = (props: { export const ReleaseInfoRelated = (props: {

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

@ -31,16 +31,6 @@ export const ReleaseSection = (props: {
); );
})} })}
</div> </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> </div>
</section> </section>
); );