1 files changed, 44 insertions, 0 deletions
diff --git a/components/anime/mobile/reused/description.js b/components/anime/mobile/reused/description.js
new file mode 100644
index 0000000..99973d3
--- /dev/null
+++ b/components/anime/mobile/reused/description.js
@@ -0,0 +1,44 @@
+export default function Description({
+  info,
+  readMore,
+  setReadMore,
+  className,
+}) {
+  return (
+    <div className={`${className} relative md:py-2 z-40`}>
+      <div
+        className={`${
+          info?.description?.replace(/<[^>]*>/g, "").length > 240
+            ? ""
+            : "pointer-events-none"
+        } ${
+          readMore ? "hidden" : ""
+        } absolute z-30 flex items-end justify-center top-0 w-full h-full transition-all duration-200 ease-linear md:opacity-0 md:hover:opacity-100 bg-gradient-to-b from-transparent to-primary to-95%`}
+      >
+        <button
+          type="button"
+          disabled={readMore}
+          onClick={() => setReadMore(!readMore)}
+          className="text-center font-bold text-gray-200 py-1 w-full"
+        >
+          Read {readMore ? "Less" : "More"}
+        </button>
+      </div>
+      <p
+        className={`${
+          readMore
+            ? "text-start md:h-[90px] md:overflow-y-scroll md:scrollbar-thin md:scrollbar-thumb-secondary md:scrollbar-thumb-rounded"
+            : "md:line-clamp-2 line-clamp-3 md:text-start text-center"
+        } text-sm md:text-base font-light antialiased font-karla leading-6`}
+        style={{
+          scrollbarGutter: "stable",
+        }}
+        dangerouslySetInnerHTML={{
+          __html: readMore
+            ? info?.description
+            : info?.description?.replace(/<[^>]*>/g, ""),
+        }}
+      />
+    </div>
+  );
+}