From 50a0f0240d7fef133eb5acc1bea2b1168b08e9db Mon Sep 17 00:00:00 2001
From: Factiven <factiven.org@gmail.com>
Date: Sun, 24 Dec 2023 13:03:54 +0700
Subject: migrate to typescript

---
 components/anime/mobile/reused/infoChip.tsx | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 components/anime/mobile/reused/infoChip.tsx

(limited to 'components/anime/mobile/reused/infoChip.tsx')

diff --git a/components/anime/mobile/reused/infoChip.tsx b/components/anime/mobile/reused/infoChip.tsx
new file mode 100644
index 0000000..80ebf83
--- /dev/null
+++ b/components/anime/mobile/reused/infoChip.tsx
@@ -0,0 +1,58 @@
+import React, { CSSProperties, FC } from "react";
+import { getFormat } from "@/utils/getFormat";
+
+interface Info {
+  episodes?: number;
+  averageScore?: number;
+  format?: string;
+  status?: string;
+}
+
+interface InfoChipProps {
+  info: Info;
+  color: any;
+  className: string;
+}
+
+const InfoChip: FC<InfoChipProps> = ({ 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>
+  );
+};
+
+export default InfoChip;
-- 
cgit v1.2.3

