From 071edc0d105b6d77340b3b88f26373c98fb73998 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 18 Aug 2024 12:13:51 +0500
Subject: [PATCH] feat: add description to release and collection cards

---
 .../CollectionLink/CollectionLink.tsx         | 21 ++++++++++++++-----
 .../ReleaseLink/ReleaseLink.16_9.tsx          | 11 +++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx
index d760eb4..fc72272 100644
--- a/app/components/CollectionLink/CollectionLink.tsx
+++ b/app/components/CollectionLink/CollectionLink.tsx
@@ -13,8 +13,14 @@ export const CollectionLink = (props: any) => {
           }}
         >
           <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
-            <Chip icon_name="material-symbols--favorite" name_2={props.favorites_count} />
-            <Chip icon_name="material-symbols--comment" name_2={props.comment_count} />
+            <Chip
+              icon_name="material-symbols--favorite"
+              name_2={props.favorites_count}
+            />
+            <Chip
+              icon_name="material-symbols--comment"
+              name_2={props.comment_count}
+            />
             {props.is_private && (
               <div className="flex items-center justify-center bg-yellow-400 rounded-sm">
                 <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--lock"></span>
@@ -26,9 +32,14 @@ export const CollectionLink = (props: any) => {
               </div>
             )}
           </div>
-          <p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
-            {props.title}
-          </p>
+          <div className="absolute bottom-0 left-0 px-2 py-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+            <p className="text-sm font-bold text-white transition-transform lg:-translate-y-10 group-hover:lg:translate-y-0 xl:text-base lg:text-lg">
+              {props.title}
+            </p>
+            <p className="text-xs text-white xl:text-base lg:text-lg right-2">
+              {props.description}
+            </p>
+          </div>
         </div>
       </div>
     </Link>
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9.tsx b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
index dcddc23..bd3c24a 100644
--- a/app/components/ReleaseLink/ReleaseLink.16_9.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
@@ -93,9 +93,14 @@ export const ReleaseLink169 = (props: any) => {
               </div>
             )}
           </div>
-          <p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
-            {props.title_ru}
-          </p>
+          <div className="absolute bottom-0 left-0 px-2 py-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+            <p className="text-sm font-bold text-white transition-transform lg:-translate-y-10 group-hover:lg:translate-y-0 xl:text-base lg:text-lg">
+              {props.title_ru}
+            </p>
+            <p className="text-xs text-white xl:text-base lg:text-lg right-2">
+              {props.description}
+            </p>
+          </div>
         </div>
       </div>
     </Link>