From 98bb7f3dce4e62bf488a13870c56d15b010e2705 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Fri, 2 Aug 2024 21:59:49 +0500
Subject: [PATCH] feat: add description collapsing for mobile on release page

---
 .../ReleaseInfo/ReleaseInfo.Basics.tsx        | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
index 2aa6a14..d5bb0af 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@@ -1,10 +1,14 @@
-import { Card } from "flowbite-react";
+import { Card, Button } from "flowbite-react";
+import { useState } from "react";
+
 export const ReleaseInfoBasics = (props: {
   image: string;
   title: { ru: string; original: string };
   note: string | null;
   description: string;
 }) => {
+  const [isFullDescription, setIsFullDescription] = useState(false);
+
   return (
     <Card className="h-full">
       <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
@@ -27,7 +31,24 @@ export const ReleaseInfoBasics = (props: {
               <div id="note" className="ml-2"></div>
             </div>
           )}
-          <p>{props.description}</p>
+          <p
+            className={`overflow-y-hidden transition-[max-height] max-h-[var(--max-height)] md:max-h-full`}
+            style={
+              {
+                "--max-height": isFullDescription ? "1000px" : "80px",
+              } as React.CSSProperties
+            }
+          >
+            {props.description}
+          </p>
+          <Button
+            onClick={() => setIsFullDescription(!isFullDescription)}
+            color="light"
+            size={"sm"}
+            className={`md:hidden block}`}
+          >
+            {isFullDescription ? "Скрыть" : "Показать полностью"}
+          </Button>
         </div>
       </div>
     </Card>