From 967b9cfbb05b6a6e38b2976f2c79d5ec8ca43893 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 01:08:59 +0500
Subject: [PATCH] refactor: profile page recently watched

---
 .../Profile/Profile.ReleaseHistory.tsx        | 30 ++++++++++++-------
 .../ReleaseInfo/ReleaseInfo.Related.tsx       | 18 ++++++++++-
 .../ReleaseSection/ReleaseSection.tsx         | 10 -------
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/app/components/Profile/Profile.ReleaseHistory.tsx b/app/components/Profile/Profile.ReleaseHistory.tsx
index e17c2d9..b579c11 100644
--- a/app/components/Profile/Profile.ReleaseHistory.tsx
+++ b/app/components/Profile/Profile.ReleaseHistory.tsx
@@ -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>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
index 496d342..80a5cac 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
@@ -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: {
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index a5b85c9..b826085 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -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>
   );