Update v4 - Merge pre-push to main (#71)

* Create build-test.yml

* initial v4 commit

* update: github workflow

* update: push on branch

* Update .github/ISSUE_TEMPLATE/bug_report.md

* configuring next.config.js file

2 files changed, 87 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>
+  );
+}
diff --git a/components/anime/mobile/reused/infoChip.js b/components/anime/mobile/reused/infoChip.js
new file mode 100644
index 0000000..41def85
--- /dev/null
+++ b/components/anime/mobile/reused/infoChip.js
@@ -0,0 +1,43 @@
+import React from "react";
+import { getFormat } from "../../../../utils/getFormat";
+
+export default function InfoChip({ info, color, className }) {
+  return (
+    <div
+      className={`flex-wrap w-full justify-start md:pt-1 gap-4 ${className}`}
+    >
+      {info?.episodes && (
+        <div
+          className={`dynamic-text rounded-md px-2 font-karla font-bold`}
+          style={color}
+        >
+          {info?.episodes} Episodes
+        </div>
+      )}
+      {info?.averageScore && (
+        <div
+          className={`dynamic-text rounded-md px-2 font-karla font-bold`}
+          style={color}
+        >
+          {info?.averageScore}%
+        </div>
+      )}
+      {info?.format && (
+        <div
+          className={`dynamic-text rounded-md px-2 font-karla font-bold`}
+          style={color}
+        >
+          {getFormat(info?.format)}
+        </div>
+      )}
+      {info?.status && (
+        <div
+          className={`dynamic-text rounded-md px-2 font-karla font-bold`}
+          style={color}
+        >
+          {info?.status}
+        </div>
+      )}
+    </div>
+  );
+}