Add a description of the k-factor

2026-07-23 04:26:57 +00:00 · 2023-09-19 10:09:21 +02:00
parent 0b7a994052
commit a82616bd34
5 changed files with 105 additions and 24 deletions
@@ -0,0 +1,54 @@
+import { Disclosure } from "@headlessui/react";
+import { useTranslations } from "next-intl";
+import { IoChevronForward } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+type KFactorProps = {
+  className?: string;
+};
+
+export const KFactor = ({ className }: KFactorProps) => {
+  const t = useTranslations("Elo");
+
+  return (
+    <Disclosure>
+      <Disclosure.Button
+        className={twMerge(
+          "flex items-center text-sm text-gray-500 dark:text-neutral-400",
+          className,
+        )}
+      >
+        <IoChevronForward className="mr-2 h-4 w-4 transition-transform ui-open:rotate-90 ui-open:transform" />
+        {t("kFactorTitle")}
+      </Disclosure.Button>
+
+      <Disclosure.Panel className="mt-4">
+        <p className="text-sm text-gray-500 dark:text-neutral-400">
+          {t("kFactorInfo1")}
+        </p>
+        <p className="mt-4 text-sm text-gray-500 dark:text-neutral-400">
+          {t("kFactorInfo2")}
+        </p>
+
+        <ul className="mb-8 ml-4 mt-3 list-outside list-disc">
+          {(
+            [
+              "kFactorInfo3",
+              "kFactorInfo4",
+              "kFactorInfo5",
+              "kFactorInfo6",
+              "kFactorInfo7",
+            ] as const
+          ).map((key) => (
+            <li
+              key={key}
+              className="mt-2 text-sm text-gray-500 dark:text-neutral-400"
+            >
+              {t.rich(key, { b: (str) => <b>{str}</b> })}
+            </li>
+          ))}
+        </ul>
+      </Disclosure.Panel>
+    </Disclosure>
+  );
+};